防止文本重叠表 td 宽度

Posted 2023-03-06

【中文标题】防止文本重叠表 td 宽度

【英文标题】：Prevent text from overlap table td width

【发布时间】：2011-06-05 21:29:40

【问题描述】：

如何限制表 <td> 条目在整个屏幕上展开时 条目太长？

【参考方案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 指定固定大小。

【参考方案2】：

你可以使用word-wrap:break-word;，这样过长的单词就会被包裹起来。

【参考方案3】：

td.whatever_class
    max-width: 100px;

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

【参考方案4】：

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

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

【讨论】：

默认显示为'table-cell'

【参考方案5】：

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