Html CSS 显示：表格单元格忽略溢出和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18746924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS display: table-cell ignores overflow and width
提问by user2769623
Fiddle: http://jsfiddle.net/wTtsV/
小提琴：http: //jsfiddle.net/wTtsV/
The table cell #t2 does not size correctly:
表格单元格 #t2 的大小不正确：
HTML:
HTML：
<div id="table">
<div id="t1">a</div>
<div id="t2">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="t3">a</div>
</div>
CSS:
CSS：
body{
margin: 0;
}
#table{
display: table;
width: 100%;
}
#t1{
display: table-cell;
background-color: red;
}
#t2{
display: table-cell;
background-color: green;
}
#t3{
display: table-cell;
background-color: blue;
}
Expected result:
预期结果：
How to hide text in #t2when it is too long?
文本#t2太长时如何隐藏？
采纳答案by Joris Lindhout
回答by Fernando Gm
I had exactly the same problem, and I got a nice solution. Add table-layout: fixed;to your id table:
我遇到了完全相同的问题，我得到了一个很好的解决方案。添加表格布局：固定；到您的 id 表：
#table{
display: table;
width: 100%;
table-layout: fixed;
}
Have fun! :D
玩得开心！:D
回答by Rahul Tripathi
May be you are looking for:-
可能您正在寻找：-
overflow:hidden;
to hide the text outside the zone.
隐藏区域外的文本。
or may you can try using this:-
或者你可以尝试使用这个：-
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
