CSS 显示：表格单元格忽略溢出和宽度答案

【问题标题】：CSS display: table-cell ignores overflow and widthCSS 显示：表格单元格忽略溢出和宽度
【发布时间】：2013-09-11 16:48:17
【问题描述】：

小提琴：http://jsfiddle.net/wTtsV/

表格单元格#t2 的大小不正确：

HTML：

<div id="table">
    <div id="t1">a</div>
    <div id="t2">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div id="t3">a</div>
</div>

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

预期结果：

#t2中的文字太长怎么隐藏？

【问题讨论】：

看，这是我想要的结果，这里#t2的文字很短：jsfiddle.net/wTtsV/1如果文字的长度超过100%#t2，恰好它变长比如这里：@987654323 @
“超过 100%” - 100% 什么？这就是你的问题。
#t2 的 100%，看这张图：i42.tinypic.com/n1patu.png，我想要这个结果而不是jsfiddle.net/wTtsV
最后的点是因为文字太长导致表格拉长，不会是我想要的100%长，而是更多！
t2 = t2 的 100%，它是自引用的。这就是为什么您需要设置以像素为单位的最大宽度，而不是百分比。

标签： html css

【解决方案1】：

我遇到了完全相同的问题，我得到了一个很好的解决方案。将 table-layout: fixed; 添加到您的 id 表中：

#table{
    display: table;
    width: 100%;
    table-layout: fixed;
}

玩得开心！ :D

【讨论】：

更好（和正确）的解决方案。对于那些正在寻找的人，这里有一些很棒的用例：css-tricks.com/fixing-tables-long-strings

【解决方案2】：

小提琴：http://jsfiddle.net/wTtsV/7/

word-break:break-all;

【讨论】：

这不是一个精确的解决方案，但它是唯一可行的 CSS 解决方案。以前从未使用过该属性，但我现在一定会记住它:-)

【解决方案3】：

也许你正在寻找：-

overflow:hidden;

隐藏区域外的文本。

或者你可以试试这个：-

overflow: hidden;
white-space: nowrap; 
text-overflow: ellipsis;

【讨论】：