How can I hide overflow in a ?

Question

I have a table. Its <td> have overflow: hidden. When I have a string that is longer than 100px, it is not hidden.

How can I hide content when it exceeds the width of its <td> container?

possible duplicate of [Why does overflow:hidden not work in a ?](http://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td) — adrianbanks, May 01 '13 at 23:17
`text-overflow: ellipsis` [is also fun](http://jsfiddle.net/be6tM/8/). — Ry-, May 01 '13 at 23:24

score 3 · Accepted Answer · answered May 01 '13 at 23:18

The default behaviour is just to wrap the text, since height is no issue! You can disable text wrapping, though, with white-space: nowrap.

Because tables are a bit of a special case, however, you then need to use max-width instead of width (which is just a “preferred width”). Here’s your updated jsFiddle.

td {
    border: 1px solid rgb(0,0,0);
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
}

score 2 · Answer 2 · answered May 01 '13 at 23:18

2

There is no overflow. Set the height in order to restrict the height of the cell, then anything that uses up more vertical space than that should overflow.

answered May 01 '13 at 23:18

Jonathan Wood

65,341
71
269
466

How can I hide overflow in a ?

2 Answers2