Отображение CSS: таблица-ячейка игнорирует переполнение и ширину

Ячейка таблицы 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, если он слишком длинный?

Ответ 1

Fiddle: http://jsfiddle.net/wTtsV/7/

word-break:break-all;

Ответ 2

У меня была точно такая же проблема, и у меня было хорошее решение. Добавьте table-layout: fixed; в таблицу идентификаторов:

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

Удачи!: D

Ответ 3

Возможно, вы ищете: -

overflow:hidden;

чтобы скрыть текст вне зоны.

или вы можете попробовать использовать это: -

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