html - 如何隐藏表格行溢出（取2）

Question

我需要确保我的表格的所有行都是固定的高度，即使单元格包含带有嵌入换行符的内容或其他会导致它们放大的特征。

基本上我只想设置td { height: 1.2em; overflow: hidden; }，但这不起作用，原因对我来说仍然是个谜。

我试过的：

• table { table-layout:fixed; }从如何隐藏表行溢出。
• table { display: block; }只是让它更宽。
• td { white-space: nowrap; }不影响嵌入式<br />。
• td { line-height: 0; }降低行高，但文本行相互重叠，难以阅读（来自Setting table row height in CSS）
• tr { height: 1em; }并td { height: 1em; }结合没有区别（来自如何固定 TR 的高度）
• td { text-overflow: ellipsis; }没有区别
• table { height: 1em; }没有区别（来自css: fix row height）
• 我不想使用像CSS 之类的 Javascript hacks: Truncate table cells, but as much as possible

似乎唯一可行的是td { display: block; }，但我对此持谨慎态度，因为据我所知，浏览器并不真正知道如何在表格中呈现不是表格单元格的东西。这真的支持吗？有更好的选择吗？

您可以查看和摆弄我在jsbin上尝试过的组合。

背景：这是一个数据网格组件，类似于dgrid，如果上下滚动时行的大小发生变化，则会导致跳跃、振动滚动和不愉快的用户体验。

Answer 1

Answer 2

你试过设置<td>吗display: inline-block;？更新了 jsBin 示例。

td {
    height: 1em;
    border: 1px solid blue;
    overflow: hidden;
    text-overflow: ellipsis; 
    display: inline-block; /* this */
}