溢出：隐藏在单元格上——意外结果
Web 开发的新手 - 必须限制单元格的大小（display:table-cell），因此
如果单元格内容大于单元格内容，则 使用 overflow:hidden单元格的宽度（我希望它被隐藏）即使使用 overflow:hidden 内容也不会被隐藏
这是代码的要点
<html>
<style type="text/css">
.table{
display: table;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
}
.mod{
width: 50px;
overflow: hidden;
border:1px solid black;
}
</style>
<div class="table">
<div class="row">
<div class="cell">
Foo
</div>
<div class="cell mod">
barbarbarbarbarbar
</div>
</div>
</div>
</html>
如果宽度（在类 mod 中）被替换为 max-宽度——它似乎有效。对如何操作感到困惑它与 max-width 一起使用，但不适用于 width
A newbie to web development -- have to restrict the size of a cell(display:table-cell) ,hence using overflow:hidden
if the cell contents are more than the width of the cell (i want it to be hidden) the content is not getting hidden even with overflow:hidden
Here's a gist of the code
<html>
<style type="text/css">
.table{
display: table;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
}
.mod{
width: 50px;
overflow: hidden;
border:1px solid black;
}
</style>
<div class="table">
<div class="row">
<div class="cell">
Foo
</div>
<div class="cell mod">
barbarbarbarbarbar
</div>
</div>
</div>
</html>
And if the width(in class mod) is replaced with max-width -- it seems to work.Confused on how its working with max-width but not with width
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为了让overflow:hidden起作用，元素必须是浮动的。如果设置 float:left;在您的 .mod 类中，它将隐藏不适合单元格的其余文本。
请注意，您还应该浮动其他类，这样以后就不会遇到问题。
In order for overflow:hidden to work the element must be floated. If you set float:left; in your .mod class it will hide the rest of the text that doesn't fit in the cell.
Note that you should float your other classes aswell so you don't encounter problems later.