How can I truncate long texts in a table using CSS?

Question

Can anyone give a CSS example of how can I create a table where long texts are truncated to texts ending with \"...\"?

Here is the example: http://jsfiddle.net/NpABe

Answer 1

This is a variation on the answer from @RobAgar that works well for me. I define the following CSS:

td.item-node {
   max-width: 10em;
}
div.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

And the HTML looks like

   
Really super duper long item note that will truncate

This way I can specify the width on the thing I care about (the table cell) without having to repeat all the white-space, overflow CSS properties for each cell. The class on the div also makes it clear what its purpose is.