Restricting text in two lines using css only

Question

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?

check out http://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css — MikeB, May 15 '13 at 13:14

Richard Ev · Accepted Answer · 2013-05-15T13:18:35.143

24

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>

edited May 15 '13 at 13:18

answered May 15 '13 at 13:13

Richard Ev

52,939
59
191
278

i have tried it by setting the div height and overflow:hidden but still it appears in three lines – user2385986 May 15 '13 at 13:15
Then increase the `line-height:25px`. This may solve your problem. – Sree ram May 15 '13 at 13:15
user, make a JSFiddle or something and replicate your issue please so we can help you figure out what isn't working properly. – Ennui May 15 '13 at 13:22
Let me know if you have any issues to the answer stated above - @user2385986 – Nitesh May 15 '13 at 13:24

score 0 · Answer 2 · answered May 15 '13 at 13:20

0

Here is the Solution.

The HTML:

<div>The quick brown fox jumps over the lazy dog.</div>

The CSS:

div{background:gray; width:100px; height:40px; overflow:hidden;}

Hope this Helps.

answered May 15 '13 at 13:20

Nitesh

15,425
4
48
60

Restricting text in two lines using css only

2 Answers2