防止文本与表格 td 宽度重叠

Question

如何限制表 条目在整个屏幕上扩展 条目太长？

Answer 1

嗯，CSS 中有 max-width、max-height 和 overflow。

因此，

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

将最大宽度和高度限制为 150 像素，并且可以是小于 150 到 150 之间的任何内容，任何不适合的内容都将被剪掉并隐藏在视图中。

Overflow 的默认值（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 样式（因为 display 属性设置得很有趣，因为它是 td，而不是普通元素）例如

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

Answer 5

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