Запретить текст из таблицы перекрытия td width

Question

Как я могу ограничить запись таблицы <td> расширением по всему экрану, когда запись слишком длинная?

Answer 1

Ну, есть max-width, max-height и overflow в CSS.

Так

td.whatever 
{ 
    max-width: 150px; 
    max-height: 150px; 
    overflow: hidden; 
} 

будет ограничивать максимальную ширину и высоту 150px, и это может быть что угодно, от менее 150 до 150, и все, что не вписывается в том, что будут обрезаны и скрытые из вида.

Переполнение по умолчанию (overflow: visible;) - это просто разрешить все, что не помещается внутри указанного контейнера, просто пролить его. Если вы хотите ограничить его в горизонтальном положении и не хочу ничего скрывать, word-wrap может помочь:

td.whatever 
{ 
    max-width: 150px; 
    word-wrap: break-word; 
} 

word-wrap сломается слова всякий раз, когда это необходимо, даже если это не в конце слова. Вы также можете использовать height и width, чтобы указать фиксированный размер, если вы не хотите, чтобы таблица расширялась или сокращалась вообще.

Answer 2

Вы можете использовать word-wrap:break-word;, поэтому наложенные слова обернуты.

Answer 3

td.whatever_class{ 
    max-width: 100px; 
} 

замените 100px на сколь угодно широкий. 1000px - хорошая ширина для веб-сайтов, поскольку она будет соответствовать почти всем мониторам, которые есть у людей сегодня, поэтому, если у вас было 20 столбцов, тогда сделайте это 50px, например.

Answer 4

Вы должны указать BOTH стили max-width и display (потому что атрибут отображения задан смешно, потому что это td, а не обычный элемент), например.

td{ 
    max-width: 100px; 
    display: inline-block; 
} 

Answer 5

Существует также хорошее решение с собственностью max-width: 0px; поэтому он будет отвечать за полную ширину таблицы.