6

Is there a CSS-only way (no JavaScript/jQuery) to only show the first two lines and, if there are three or more lines, hide the extra lines and show an ellipsis?

For example, how can I take this fiddle:

http://jsfiddle.net/0yyr3e63/

...and make it look like this?

Lorem Ipsum Dolor
Sit Amet Consectetur

Ut Enim Ad Minim
Veniam Quis Nostrud...

Duis Aute Irure
Dolor In...

Thanks in advance.

Ryan
  • 6,027
  • 16
  • 52
  • 89

1 Answers1

3

You can use text-overflow:ellipsis property with height.

Like this

.truncate 
{
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height:100px;
}

By using text-overflow, you can display your output without using javascript.

Sources

Source Link

To Learn more about truncating. Read this link

New Update

For multiline ellipsis you can use this method.

css
.classname:after{
content: "\02026";
}

Multiline-Ellipsis

Few Links which i think might be useful

1.Codepen example

2.Css Tricks

Vivek Dragon
  • 2,218
  • 4
  • 27
  • 48
  • I think the OP is aware of `text-overflow: ellipsis;` But he is looking for a solution to achieve multiline ellipsis. – Hashem Qolami Aug 22 '14 at 13:58
  • His fiddle shows that he didn't used ellipsis property @HashemQolami – Vivek Dragon Aug 22 '14 at 14:08
  • 1
    `text-overflow: ellipsis` only works for single line truncating. I need to show the first two lines only, followed by an ellipsis if additional lines exist (see my example in the OP). – Ryan Aug 22 '14 at 14:11
  • 1
    You're right, however `text-overflow: ellipsis;` doesn't work on multiline text. – Hashem Qolami Aug 22 '14 at 14:11
  • 2
    @Ryan You might want to know that ["OP" stands for "Original Poster"](http://meta.stackexchange.com/questions/146513/what-does-op-mean) not the post itself :) – Hashem Qolami Aug 22 '14 at 14:14
  • Your multiline method would also show an ellipsis if all text would be visible. – Zothy Nine Jan 13 '21 at 13:17