html - 使用 css 防止 html 表的表行增长(即保持固定的行高)

Question

我有一个简单的表格控件，它是我在网站运行时使用 javascript 动态创建的。

我使用 Bootstrap 类(例如 col-xs-3 等)为列设置了固定宽度。

表中的一列是描述字段，我的数据中有许多条目，文本较长。

在大屏幕上，它只是一行文本，所以一切都很好，但是当减小窗口大小时，以及使用较小的设备时，宽度太窄而无法在一行上显示描述，所以将环绕并导致整行增长以适合整个文本。

显示整个文本不是必需的，我需要确保无论屏幕/窗口大小如何，表格行都不会增长并保持固定高度。

有没有办法在 css 中执行此操作，因为我不想在每个单元格元素中插入一个额外的 div，如果我可以避免的话，我已经在其他帖子中看到了建议。

此外，这需要与 safari 和 chrome 兼容。

Answer 1

试试这个

td {
    white-space: nowrap; 
    max-width: 200px;   //or adjust for however wide you want max width to be, 
                        //could also use % widths like max-width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
}

每当文本比表格单元格宽时，这将创建一个 ...。