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

add width: 200px; and white-space: nowrap; to your .text css block. With no width set, the text just expands and fills in.

Answer 2

span{
    display: block; /* Fallback for non-webkit */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* no of lines */
    text-overflow: ellipsis;
    overflow:hidden !important;
    width:180px;
}

above CSS property 'll put three dots...
eg:

Lorem Ipsum is simply dummy
text of the printing and
typesetting industry. Lorem...

Answer 3

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?)