CODEWITHSUNDEEP
htmlcssoverflowellipsis
Ryan
Ryan

Reputation: 6217

Pure CSS Ellipsis For Three or More Lines of Text

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.

Upvotes: 6

Views: 24530

Answers (1)

Vivek Dragon
Vivek Dragon

Reputation: 2248

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

Upvotes: 4

Related Questions