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

我得到了一个固定的宽度和高度的表格单元格，如果文字太大，单元格大小应该保持不变，文本应该被溢出隐藏。

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

但是，如果添加了太多的文本，则表格单元格会展开超过100像素。 任何技巧，以防止扩大？

文本的长度应该是几行，所以“white-space：nowrap”解决scheme是不适用的

Answer 1

按照CSS 2.1规则 ，表格单元格的高度是“内容要求的最小高度”。 因此，您需要使用内部标记（通常是div元素（ <td><div>content</div></td> ））间接地限制高度，并在div元素上设置height和overflow属性（不设置display: table-cell ，当然，因为这将使其高度服从CSS 2.1表单元格规则）。

Answer 2

我不认为接受的答案实际上完全解决了这个问题。 你想在table-cell内容上有一个vertical-align: middle 。 但是当你在table-cell中添加一个div并给它一个高度时，那个inner 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

尝试这样的事情：

  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，那么你不能用最大宽度来分解它，所以解决scheme是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表格解决scheme行或单元格的最大高度限制通过增加表宽度，Javascript

Answer 5

尝试

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

Answer 6

使用下面的风格：

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

HTML是：

 <div> your long text here </div> 

Answer 7

这是你想要的：

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

Answer 8

可能这符合你的需求？

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