如何设置表格单元的最大高度？

Question

我得到了一个具有固定宽度和高度的表格单元，并且如果文本太大，单元格大小应保持不变，并且文本应通过overflow：hidden隐藏。div {   display: table-cell   height: 100px;   width: 100px;   overflow: hidden;   vertical-align: middle;}但是，如果添加的文本过多，则表格单元格会扩展到100px以上。有什么技巧可以阻止它扩展吗？文本的长度应为几行，因此“ white-space：nowrap”解决方案不适用

Answer 1

根据CSS 2.1规则，表格单元格的高度为“内容所需的最小高度”。因此，您需要使用内部标记（通常是div元素（<td><div>content</div></td>））和元素上的set height和overflow属性间接限制高度div（display: table-cell当然，不对其进行设置，因为它的高度将遵循CSS 2.1表格单元格规则）。

Answer 2

您可以执行以下任一操作：

使用css属性“ line-height”并针对每个表格行（）进行设置，这还将使内容垂直居中

将“ display” css属性设置为“ block”，如下所示：

td 

{

  display: block;

  overflow-y: hidden;

  max-height: 20px;

}

祝好运！