Просмотров: 8 339

Как сделать перенос длинного слова в ячейке td таблицы html.

Сегодня столкнулся с проблемой переноса длинных слов в таблицах 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;
}

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

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

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

Если мы еще не знакомы, меня зовут Дмитрий Ченгаев.

Я автор сайта на котором вы сейчас находитесь.

Если вам сейчас нужна помощь в освоении каких-либо технологий веб-разработки и на вашем сайте нужно что-то изменить или добавить, можете обращаться ко мне.

Вот ссылка на страницу услуг:

Мои услуги