Reigel Reigel - 6 months ago 78
HTML Question

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 ...

Answer

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.