Как сделать текст скрытым с переполнением, скрытым в ячейке таблицы?

Question

У меня есть ячейка таблицы, в которой я хочу скрыть текст переполнения поверх 100px по ширине. Это здесь, но он по-прежнему показывает переполнение текста: http://jsfiddle.net/tkatcqwe/

.text { 
 
    width: 100px; 
 
    background: yellow; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    position: relative; 
 
}

<table><tr><td class='text'>a really long text about random things, blah blah blah blah blah blah blah</td></tr></table>

Answer 1

.text { 
 
    max-width: 100px; 
 
    width: 100px; 
 
    background: yellow; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    position: relative; 
 
}

<table><tr><td class='text'>a really long text about random things, blah blah blah blah blah blah blah</td></tr></table>

попробуйте добавить максимальную ширину в 100px вашему .text
добавил сниппета.

Answer 2

Оберните текст в <div> или любой элемент уровня блока, или <span> + display:block, если вы хотите, чтобы таблица была не тронута.

.text { 
 
    width: 100px; 
 
    background: yellow; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<table><tr><td><div class='text'>a really long text about random things, blah blah blah blah blah blah blah</div></td></tr></table>

width:100px Или установить на столе вместо + table-layout:fixed.

table { 
 
    width: 100px; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
} 
 
.text { 
 
    background: yellow; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<table><tr><td class='text'>a really long text about random things, blah blah blah blah blah blah blah</td></tr></table>