Menu
I want to limit the text to two lines inside a <div>
If the text is coming in more than two lines, then it should hide rest of the text after displaying two lines
For example:
Long text continues
down the road
into a lane.
***this should come as:
Long text continues
down the road
I have to do it using css only..
Please suggest?
757
asked May 30 '26 05:05
How about fixing the height of your div to be exactly two lines high, and using overflow:hidden;?
For example:
<style type="text/css">
.twolines
{
font-size: 20px;
height: 48px;
overflow: hidden;
}
</style>
You could also use em values and line-height:
<style type="text/css">
.twolines
{
font-size: 1em;
line-height: 1em;
height: 2em;
overflow: hidden;
}
</style>
Here's a complete, working example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.twolines
{
font-size: 1em;
background-color: silver;
line-height: 1em;
height: 2em;
overflow: hidden;
}
.twolines p
{
margin: 0;
}
</style>
</head>
<body>
<div class="twolines">
<p>Long text continues</p>
<p>down the road</p>
<p>into a lane.</p>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
