CSS percentage width and text-overflow in a table cell

问题:

I have a table where the cells' width is in percentage and I want to use text-overflow: ellipsis to hide long lines of text:

http://jsfiddle.net/Fm5bM/

In the example the ellipsis works fine in a div but not in the cell. It still grows and ignores both width:60% and max-width:60%.

If I add a display:block to the cell, the text does stop at 60% and gets the ellipsis, but the total width of the cell is still the size of the whole text.

http://jsfiddle.net/Fm5bM/3/

Ultimately, I want the table to fit the screen. Is there a way to do it with pure css?

回答1:

This is easily done by using table-layout: fixed, but "a little tricky" because not many people know about this CSS property.

table {   width: 100%;   table-layout: fixed; } 

See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/

文章来源: CSS percentage width and text-overflow in a table cell