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

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

我不认为接受的答案实际上完全解决了问题.你想拥有一个vertical-align: middle关于表格单元格的内容.但是当你在表格单元格中添加一个div并给它一个高度时,那个内部DIV的内容将位于顶部.检查这个jsfiddle.溢出:隐藏; 工作正常,但如果缩短内容以使其只有一行,则此行不会垂直居中

解决方案不是在表格单元格中添加DIV,而是在外部添加DIV.这是代码:

/* some wrapper */
div.d0 {
    background: grey;
    width:200px;
    height: 200px;
}

div.table {
    margin: 0 auto; /* just cosmetics */
    width: 150px;
    height: 150px;
    background: #eee;
    display: table;
}

div.tablecell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 100%;
    width: 100%;
    background: #aaa;
}

div.outer-div {
    height: 150px;
    overflow: hidden;
}

<div class="d0">
    <div class="outer-div">
        <div class="table">
            <div class="tablecell">
                Lorem ipsum 
                <!--dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,-->
            </div>
        </div>
    </div>
</div> 

Answer 3

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

1. 使用 CSS 属性line-height并将其设置为每个表格行 ( <tr>)，这也将使内容垂直居中<td>

2. 设置<td>CSS 属性display: block如下：

td 
{
  display: block;
  overflow-y: hidden;
  max-height: 20px;
}