Search code examples
htmlcssellipsis

CSS ellipsis on second line

CSS text-overflow: ellipsis on second line, is this possible? I can't find it on the net.

example:

what I want is like this:

I hope someone could help me. I need 
an ellipsis on the second line of...

but what's happening is this:

I hope someone could help me. I ...
Solution

  • A requirement for text-overflow: ellipsis; to work is a one-line version of white-space (pre, nowrap etc). Which means the text will never reach the second line.

    Ergo. Not possible in pure CSS.

    My source when I was looking for the exact same thing just now: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

    EDIT If the good CSS gods will implement http://www.w3.org/TR/css-overflow-3/#max-lines we can haz this in pure CSS using fragments (new) and max-lines (new). Also some more info on http://css-tricks.com/line-clampin/

    EDIT 2 WebKit/Blink has line-clamp: -webkit-line-clamp: 2 will put ellipsis on 2nd line.