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 rules，表格单元格的高度为“内容所需的最小高度”。因此，您需要使用内部标记间接限制高度，通常是div元素（<td><div>content</div></td>），并在{{1}上设置height和overflow属性当然，元素（没有设置div，因为它会使它的高度服从CSS 2.1表格单元规则。）

Answer 2

我不认为接受的答案实际上完全解决了问题。您希望在表格单元格内容上有vertical-align: middle。但是当你在表格单元格中添加一个div并给它一个高度时，那个内部DIV的内容将位于顶部。检查此jsfiddle。溢出：隐藏;工作正常，但如果你缩短内容，使其只有一行，这一行won't be centered vertically

解决方案不是在表格单元格中添加DIV，而是在外部添加DIV。这是the Code：

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 3

尝试这样的事情： -

 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;
}

Answer 4

在css中，您无法设置表格单元格最大高度，如果您使用白色空间nowrap，那么您无法使用最大宽度打破它，因此解决方案是在所有浏览器中都可以使用javascript。

所以，这对你有用。

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

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

此脚本每次将表格宽度增加300px，最大值为4000px，直到行缩小到最大高度（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 Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript

Answer 5

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

使用css属性＆＃34; line-height＆＃34;并按表格行（）设置它，这也将在
设置＆＃34;显示＆＃34; css属性为＆＃34; block＆＃34;以及如下：

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

Answer 6

尝试

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

Answer 7

使用以下样式：

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

HTML为：

<div>
    your long text here
</div>

Answer 8

如果使用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>

Answer 9

这可能符合您的需求吗？

<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>

Answer 10

这就是你想要的：

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

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

10 个答案: