Как ограничить ширину ячейки таблицы в HTML, когда она имеет пробел: nowrap?

Question

У меня есть ячейка таблицы, для которой я хотел бы иметь следующие эффекты:

width: 100px;
white-space: nowrap;
overflow: hidden;

Другими словами, ячейка всегда должна быть одной строкой текста (ее содержимое гарантированочтобы он содержал обычный текст без HTML-разметки), его ширина должна составлять не более 100 пикселей, а если текст длиннее, его следует обрезать.

К сожалению, когда текст становится длинным, ячейка все еще растягивается.Протестировано в IE и FF, оба из которых находятся среди моих целевых браузеров.

Предложение добавить <div> внутри ячейки и установить ширину на это сложно.Таблица генерируется из элемента управления gridview, который просто добавляет указанную ширину столбца к элементу <td> и вставляет текст как есть.

Answer 1

Вы можете установить max-width:100px.Живой пример: http://jsfiddle.net/tw16/RuAVq/

td{
    width: 100px;
    max-width: 100px; /* add this */
    white-space: nowrap;
    overflow: hidden;
}

Проблема, как правило, в том, что IE не поддерживает это.

Другое решение, которое поддерживается в IE, - это использование float:left.Живой пример: http://jsfiddle.net/tw16/RuAVq/1/

td{
    width: 100px;
    float: left; /* add this */
    white-space: nowrap;
    overflow: hidden;
}