Is it possible to use text-overflow:ellipsis on multiline text?

I have a <p> tag with a specific width and height.

I want to use text-overflow:ellipsis to get ... if the text in the tag is too long.

Is this possible to solve with css on multiline text?


Googling doesn't reveal anything even remotely promising, so I'm going to say that it's not possible.

I did find text-overflow: -o-ellipsis-lastline, but it only works in Opera: http://people.opera.com/dstorey/text/text-overflow.html (mirror: http://jsbin.com/exugux/)

There's also a similar WebKit-only solution: http://dropshado.ws/post/1015351370/webkit-line-clamp


You can do it with css. It only works in webkit browsers but has a fallback for the other ones.

use :

display: -webkit-box;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */

along with:

max-width: $maxwidth;
overflow: hidden;
text-overflow: ellipsis;

Here is the fiddle: demo