Add three dots in a multiline span

Question

I found this question here on SO and the solution is pretty simple:

jsfiddle: http://jsfiddle.net/Y5vpb/

html:

Lorem Ipsum is s         


        

Answer 1

The specification for the text-overflow property says that this is not possible for multiline text:

This property specifies rendering when inline content overflows its block container element ("the block") in its inline progression direction that has ‘overflow’ other than ‘visible’. Text can overflow for example when it is prevented from wrapping (e.g. due to ‘white-space:nowrap’ or a single word is too long to fit).

In other words, only works on single line text blocks.

source: http://dev.w3.org/csswg/css3-ui/#text-overflow

EDIT This fiddle has a workaround using jquery: http://jsfiddle.net/k5VET/ (source: Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?)