CSS word-break combined with text-overflow

Question

So I am trying to combine word-break with text-overflow which does work at some point but not how it should be.

For example, I have set up this Fiddle

CSS:

width: 200px;
padding: 8px;
border:1px solid blue;
word-break: break-word;
height: 100px;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;

For clarification, once text is broken in to parts it should fill box and at the end of the text there should be 3 dots. Currently there is just a single line where it works.

Answer 1

As far as I know, this is not possible using CSS.

The only thing you could do is specify the height, and overflow:hidden. (No ellipsis in the end.)

This is stated in the W3 spec for text-overflow.

ellipsis
an ellipsis string is inserted at each box boundaries where a text overflow occurs. The values of these ellipsis strings is determined by the 'text-overflow-ellipsis' property. The insertions take place at the boundary of the last full glyph representation of a line of text
...
In other words, the text-overflow-mode only affects the textual content of a block element which participate in its own inline flow.

You will need to use JavaScript for achieving this.

Here is an example of a jQuery plugin : http://pvdspek.github.com/jquery.autoellipsis/