如何设置table-cell的最大高度？

问题描述

我有一个固定宽度和高度的表格单元格，如果文本太大，单元格大小应该保持不变，文本应该被overflow：hidden隐藏。

I got a table-cell with fixed width and height and if text is too large, cell size should remain the same and text should be hidden by overflow:hidden.

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

但是，如果添加太多文本，表格单元格扩展超过100像素。

Table-cell, however, expands beyond 100px if too much text is added. Any tricks to prevent it from expanding?

文字长度应为几行，因此white-space：nowrap解决方案不适用

Text should be several lines in length, so "white-space:nowrap" solution is not applicable

推荐答案

由，表格单元格的高度是内容所需的最小高度。因此，您需要使用内部标记间接限制高度，通常是 div 元素（< td>< div> content< / div> < / td> ），并设置 height 和 code> div 元素（没有设置 display：table-cell ），当然，因为这将使其高度服从CSS 2.1表单元格规则）。

By CSS 2.1 rules, the height of a table cell is "the minimum height required by the content". Thus, you need to restrict the height indirectly using inner markup, normally a div element (<td><div>content</div></td>), and set height and overflow properties on the the div element (without setting display: table-cell on it, of course, as that would make its height obey CSS 2.1 table cell rules).

这篇关于如何设置table-cell的最大高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！