防止重叠表td宽度的文本

Question

如何限制表<td>条目以扩展整个屏幕 条目太长了？

Answer 1

好吧，CSS中有max-width，max-height和overflow。

所以

td.whatever
{
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

会将最大宽度和高度限制为150px，并且它可以是从小于150到150的任何内容，任何不适合内部的东西都会被剪掉并隐藏在视图之外。

溢出的默认值（overflow: visible;）只是允许任何不适合其指定容器内的东西溢出它。如果您只想横向限制它并且不想隐藏任何内容，word-wrap可能有所帮助：

td.whatever
{
    max-width: 150px;
    word-wrap: break-word;
}

word-wrap会在需要时断言，即使它不在单词的末尾。如果您不希望表扩展或缩小，也可以使用height和width指定固定大小。

Answer 2

你可以使用word-wrap:break-word;，所以过长的单词会被包裹。

Answer 3

td.whatever_class{
    max-width: 100px;
}

用你想要的宽度替换100px。 1000px对于网站来说是一个很好的宽度，因为它适用于人们现在拥有的几乎所有显示器，所以如果你有20列，那么例如50px。

Answer 4

您需要同时指定max-width和display样式（因为显示属性设置为有趣，因为它是td，而不是普通元素），例如。

td{
    max-width: 100px;
    display: inline-block;
}

Answer 5

还有一个很好的解决方案，属性max-width：0px;所以它将负责表的全宽。