html - 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

私はまったく同じ問題を抱えていて、素晴らしい解決策を得ました。テーブル レイアウトの追加: 固定; あなたの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;