Table - nowrap in two lines?

Question

Please take look at this code:

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

http://jsfiddle.net/kd4zF/

I want "td" Description cell to display in 2 rows. Overflow should be hidden. white-space: nowrap; display only one row, and without it all text is showing. Any ideas?

Solution 1

add :before and :after to td refer this http://jsfiddle.net/microbians/csYjC/

Solution 2

Try

white-space:pre;

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

Check the following screenshot

Solution 3

text-overflow: ellipsis just works on single lines. That's why you have to use the white-space thing.

You have to make some JavaScript to achieve it. There's also a jQuery plugin: http://pvdspek.github.io/jquery.autoellipsis

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