如何在 <td> 中隐藏溢出？

Question

我有一张桌子。它的<td> 有overflow: hidden。当我有一个长度超过 100px 的字符串时，它不会被隐藏。

当内容超出其<td> 容器的宽度时，如何隐藏内容？

http://jsfiddle.net/be6tM/

Answer 1

默认行为只是换行，因为高度不是问题！不过，您可以使用 white-space: nowrap 禁用文本换行。

由于表格有点特殊，因此您需要使用max-width 而不是width（这只是“首选宽度”）。 Here’s your updated jsFiddle.

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

Answer 2

没有溢出。设置高度以限制单元格的高度，然后任何占用的垂直空间超过该高度的内容都会溢出。