如何设置单元格的最大高度？
如何设置单元格的最大高度？
提问于 2012-12-02 17:22:05
我得到了一个固定宽度和高度的表格单元格，如果文本太大，单元格的大小应该保持不变，文本应该通过overflow:hidden隐藏。
div {
display: table-cell
height: 100px;
width: 100px;
overflow: hidden;
vertical-align: middle;
}然而，如果添加了太多的文本，表格单元格会扩展到超过100px。有什么技巧可以阻止它的扩张吗？
文本长度应为几行，因此不适用“空格:nowrap”解决方案
回答 8
Stack Overflow用户
回答已采纳
发布于 2012-12-02 17:43:03
根据CSS 2.1 rules，表单元格的高度是“内容所需的最小高度”。因此，您需要使用内部标记(通常是div元素(<td><div>content</div></td>) )间接地限制高度，并在div元素上设置height和overflow属性(当然，不要在其上设置display: table-cell，因为这将使其高度符合CSS2.1表单元格规则)。
Stack Overflow用户
发布于 2015-03-01 10:07:56
我不认为公认的答案实际上完全解决了问题。您希望在表单元格内容上有一个vertical-align: middle。但是，当您在表格单元格中添加div并赋予其高度时，内部DIV的内容将位于顶部。检查此jsfiddle。overflow:hidden；可以很好地工作，但如果您将内容缩短为只有一行，则这一行won't be centered vertically
解决方案不是在单元格内部添加DIV，而是在单元格外添加DIV。这是the Code
/* 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>
Stack Overflow用户
发布于 2012-12-02 17:29:49
试着这样做：
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13667941
复制相关文章
相似问题
腾讯云开发者
