3

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 ?

Community
  • 1
  • 1
Nuru Salihu
  • 4,756
  • 17
  • 65
  • 116
  • What browsers are you targeting? – dowomenfart Feb 25 '15 at 18:22
  • 1
    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 Feb 25 '15 at 18:22
  • example : http://codepen.io/anon/pen/emrqYJ if this is what you look for, i can turn it as an answer – G-Cyrillus Feb 25 '15 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 Feb 25 '15 at 18:31

1 Answers1

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

dowomenfart
  • 2,803
  • 2
  • 15
  • 17
  • Just wondering what are webkit browsers sir. Does it support IE? – Nuru Salihu Feb 25 '15 at 18:45
  • These are the -webkit- browsers. http://stackoverflow.com/questions/3468154/what-is-webkit-and-how-is-it-related-to-css. IE is Trident. So if you want IE support I would suggest using the jQuery plugin. – dowomenfart Feb 25 '15 at 18:48
  • If you really want to get dirty using just css here is another link to show a little work around http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/ – dowomenfart Feb 25 '15 at 18:52
  • 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;`. – Bullsized Aug 01 '22 at 09:21