Pure CSS Ellipsis For Three or More Lines of Text

Question

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.

possible duplicate of Limit text length to n lines using CSS — Paulie_D
– Paulie_D, Commented Aug 22, 2014 at 13:56
@Paulie_D I read that post but it doesn't have an actual useful answer. — Ryan
– Ryan, Commented Aug 22, 2014 at 14:41

Vivek Dragon · Accepted Answer · 2014-08-25 09:49:48Z

4

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

edited Aug 25, 2014 at 9:49

answered Aug 22, 2014 at 13:56

Vivek Dragon

2,2485 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hashem Qolami Over a year ago

I think the OP is aware of text-overflow: ellipsis; But he is looking for a solution to achieve multiline ellipsis.

Vivek Dragon Over a year ago

His fiddle shows that he didn't used ellipsis property @HashemQolami

Ryan Over a year ago

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).

Hashem Qolami Over a year ago

You're right, however text-overflow: ellipsis; doesn't work on multiline text.

Hashem Qolami Over a year ago

@Ryan You might want to know that "OP" stands for "Original Poster" not the post itself :)

|

Collectives™ on Stack Overflow

Pure CSS Ellipsis For Three or More Lines of Text

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related