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

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

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

然而，如果添加了太多的文本，表格单元格的扩展就会超过100px。有什么技巧可以防止它扩展吗？

文本应该是几行的长度，所以“空白: nowrap”解决方案是不适用的

124172 次浏览
小开

试试看

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

这就是你想要的:

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

试试这样:-

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

使用以下风格:

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

HTML 是:

<div>
your long text here
</div>
小开
最佳答案

根据 CSS 2.1规则，表单元格的高度是“内容所需的最小高度”。因此，您需要使用内部标记(通常是一个 div元素(<td><div>content</div></td>))间接地限制高度，并在 div元素上设置 height和 overflow属性(当然，不要在它上面设置 display: table-cell，因为这会使它的高度遵守 CSS 2.1表单元格规则)。

小开

我不认为公认的答案实际上能完全解决问题。您希望在表单元格内容上有一个 vertical-align: middle。但是，当您在表单元格中添加一个 DIV 并给它一个高度时，该内部 DIV 的内容将位于顶部。 看看这个 Jsfiddle。溢出: hide; 工作得很好，但是如果你缩短内容使其只有一行，这一行 < a href = “ http://jsfiddle.net/beipawel/outgxx1w/2/”rel = “ noReferrer”> 将不会垂直居中

解决方案不是在表单元格内部添加 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>

小开

在 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 表解决方案通过增加表的宽度来最大限制行或单元格的高度，Javascript

小开

这个能满足你的需要吗？

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

小开

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

  1. 使用 css 属性“ line-height”并将其设置为每个表行() ，这也将使内容垂直居中

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

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

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

在我的案例中，把桌子放在一个柔性盒子里，把桌子的高度设置为 height: fit-content;就可以了。这样桌子就可以做它应该做的事了。


提交答案