Reputation: 63788
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?
Upvotes: 2
Views: 516
Reputation: 225291
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;
}
Upvotes: 4
Reputation: 67355
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.
Upvotes: 2