CSS显示：table-cell忽略溢出和宽度

Question

小提琴：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中的文字太长，如何隐藏文字？

Answer 1

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

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

玩得开心！ ：d

Answer 2

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

word-break:break-all;

Answer 3

可能您正在寻找： -

overflow:hidden;

隐藏区域外的文字。

或者你可以尝试使用它： -

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