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

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

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

但是，如果添加了太多文本，则表格单元格会扩展到100px以上。有什么技巧可以阻止它扩展吗？

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

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

我认为接受的答案实际上不能完全解决问题。您希望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> 

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

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

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

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

祝好运！

尝试这样的事情：

 table {
    width: 50%;
    height: 50%;
    border-spacing: 0;
    position:absolute;
}
td {
    border: 1px solid black;
}
#content {
    position:absolute;
    width:100%;
    left:0px;
    top:20px;
    bottom:20px;
    overflow: hidden;
}

在css中，您无法设置表格单元的最大高度，如果将nowrap留白，则无法以最大宽度将其断开，因此解决方案是在所有浏览器中都可以使用javascript。

因此，这可以为您工作。

使用Javascript限制表中所有单元格或行的最大高度：

该脚本适用于水平溢出表。

此脚本每次将表格宽度增加300px，最大增加4000px，直到行缩小到max-height（160px）为止，您还可以根据需要编辑数字。

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

资料来源：HTML表格解决方案通过增加表格宽度，行或单元格的最大高度限制，Javascript

使用以下样式：

div {
  display: fixed;
  max-height: 100px;
  max-width: 100px;
  overflow: hidden;
}

HTML是：

<div>
    your long text here
</div>

如果使用display：table-cell，则max-height不适用于此样式的div。所以对我有用的解决方案是设置内部div的最大高度

<div class="outer_div" style="display:table">

    <div class="inner_div" style="display:table-cell">
        <img src="myimag.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>
    <div class="inner_div" style="display:table-cell">
        <img src="myimag2.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>

</div>

尝试

   <td style="word-wrap: break-word">Long text here</td>

这可能适合您的需求吗？

<style>
.scrollable {
  overflow-x: hidden;
  overflow-y: hidden;
  height: 123px;
  max-height: 123px;
}
</style>

<table border=0><tr><td>
  A constricted table cell
</td><td align=right width=50%>
  By Jarett Lloyd
</td></tr><tr><td colspan=3 width=100%>
  <hr>
  you CAN restrict the height of a table cell, so long as the contents are<br>
  encapsulated by a `&lt;div>`<br>
  i am unable to get horizontal scroll to work.<br>
  long lines cause the table to widen.<br>
  tested only in google chrome due to sheer laziness - JK!!<br>
  most browsers will likely render this as expected<br>
  i've tried many different ways, but this seems to be the only nice way.<br><br>
</td></tr><tr><td colspan=3 height=123 width=100% style="border: 3px inset blue; color: white; background-color: black;">
  <div class=scrollable style="height: 100%; width: 100%;" valign=top>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
  </div>

这就是你想要的：

td {
   max-height: whatever;
   max-width: whatever;
   overflow: hidden;
}