Загрузка страницы..
Перенос длинных слов в таблицах HTML
Сегодня столкнулся с проблемой переноса длинных слов в таблицах HTML
Перенос длинных слов в таблицах HTML
2014-02-22T14:02 22 февр. 2014 14:02
Просмотров: 6365

Сегодня столкнулся с проблемой переноса длинных слов в таблицах HTML.

Имеется следующая таблица:

<table>
    <tr>
        <td>
            короткое слово
        </td>
        <td style="width:200px;">длинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноеслово
        </td>
        <td>
            короткое слово
        </td>
    </tr>
</table>

В одной из ячеек этой таблицы находится очень длинное слово. Ч­то длинное слово очень сильно увеличивает ширину ячейки. Из-за этого она смотрится совсем не красиво.

Уменьшить ширину ячейки не представляется возможным даже явно задав ширину для нее:

style="width:200px"

Каким же образом можно решить эту проблему?

Для этого нужно добавить следующие стили CSS:

table {
table-layout: fixed;
width:100%
}
td {
word-wrap:break-word;
}

После этого все будет отображаться так, как надо.

Вот живой пример:

Надеюсь, это поможет решить вашу проблему. Успехов.



Комментарии: 1

комментарий Странник
Странник
2018-12-04T16:0104 дек. 2018 16:01
Используйте тег br для переноса

Добавить комментарий

up
Яндекс.Метрика Яндекс.Метрик