How to wrap and truncate a long string in to three lines in css

Question

I want to wrap my long article in to three to four lines and a more button below. Currently, i am using the below css code.

.truncate { width: auto; text-align: justify; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

The above css class does what i want . However, it shortens the artcile to a single line code code only. I tried everything possible to make it in to three or four and half lines and din't succeed. I thought of adding a height property and didn't change. please how do i control the number of lines. ? Any help would be appreciated.

Update

Just like on SO here . A question title, and just two lines from the post. Please how do i achieve that ?

in order to do an ellipsis on more than 1 line, you need to fake it with overflow and a pseudo or extra element holding the 3 specific dots. nowrap keeps everything on one single line btw — G-Cyrillus
– G-Cyrillus, Commented Feb 25, 2015 at 18:22
example : codepen.io/anon/pen/emrqYJ if this is what you look for, i can turn it as an answer — G-Cyrillus
– G-Cyrillus, Commented Feb 25, 2015 at 18:27
@GCrillus thank you for your time sir. Actually i want it just like normal blogs, aticles are listed on a magazine website home page. That is A titlte, then , few lines from the post then a view more link. — Nuru Salihu
– Nuru Salihu, Commented Feb 25, 2015 at 18:31

dowomenfart · Accepted Answer · 2015-02-25 18:37:38Z

5

You can use -webkit-line-clamp: 2; -webkit-box-orient: vertical;. But it's only for webkit browsers.

http://jsfiddle.net/tv2mfxe5/1/

.truncate { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

And if this doesn't work for you. I would recommend using a jQuery plugin, dot dot dot

edited Feb 25, 2015 at 18:37

answered Feb 25, 2015 at 18:27

dowomenfart

2,8132 gold badges17 silver badges18 bronze badges

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

4 Comments

Nuru Salihu Over a year ago

Just wondering what are webkit browsers sir. Does it support IE?

dowomenfart Over a year ago

These are the -webkit- browsers. stackoverflow.com/questions/3468154/…. IE is Trident. So if you want IE support I would suggest using the jQuery plugin.

dowomenfart Over a year ago

If you really want to get dirty using just css here is another link to show a little work around cssmojo.com/line-clamp_for_non_webkit-based_browsers

Bullsized Over a year ago

just a clarification: this will only work if there are spaces in the string you are trying to overflow, if it's a string like really_long_file_name_containing_both_foo_and_bar_with_some_random_code_in_german_for_example.jpg will not do the trick, you should try with word-wrap: break-word;.

Collectives™ on Stack Overflow

How to wrap and truncate a long string in to three lines in css

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related