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

Question

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

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

我尝试了什么：

来自How to hide Table Row Overflow的
• 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; }合并无效（来自How to fix height of TR）
• td { text-overflow: ellipsis; }没有任何区别
• table { height: 1em; }没有任何区别（来自css: fix row height）
• 我不想使用像CSS: Truncate table cells, but fit as much as possible
这样的Javascript黑客攻击

唯一似乎有效的是td { display: block; }，但我对此很谨慎，因为据我所知，浏览器并不真正知道如何渲染不是表格单元格内的东西。表。这实际上是支持的吗？还有更好的选择吗？

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

背景：这适用于data grid component，类似于dgrid，如果您在向上和向下滚动时更改大小，则会导致跳跃，振动滚动和不愉快的用户体验。< / p>

Answer 1

如果您担心display:block对TD元素的意外后果，那么我建议您将内容包装在容器元素（DIV）中的TD内部，并给出height:1em和overflow:hidden ...的工作原理相同，但没有因为TD元素显示为其他内容而导致表格布局混乱的风险table-cell。

  

td { height: 1.2em; overflow: hidden; } [...]因为对我来说仍然是个谜的原因不起作用。

不是一个谜，请看CSS spec for overflow：

  

“适用于：阻止容器”

Answer 2

您是否尝试过将<td>设为display: inline-block;？更新了jsBin example。

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