Table - nowrap in two rows?

Question

Please take a look at this code:

td { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

http://jsfiddle.net/kd4zF/

I want the "td" cell to appear in 2 lines. Overflow must be hidden. white-space: nowrap; display only one line, and without it all text is displayed. Any ideas?

Answer 1

add :before and :after in td to the link http://jsfiddle.net/microbians/csYjC/

Answer 2

Try

 white-space:pre; 

also press the enter button where you need to break the text.

Check out the following screenshot

Answer 3

text-overflow: ellipsis only works on one line. That is why you should use the white-space thing.

For this you need to make JavaScript. There is also a jQuery plugin: http://pvdspek.imtqy.com/jquery.autoellipsis

There is also a little CSS trick that can fake it in a few lines: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css