CSS. Word-wrap в таблице

CSS, HTML, Вопросы и ответы
24 февраля 2012

Вопрос

Раньше я использовал word-wrap: break-word для переноса текста в DIV-ах и SPAN-ах, но похоже, что это не работает для ячеек таблицы. У меня таблица шириной 100%, в ней один ряд и 2 столбика. Хотя тексту в столбиках и назначено это свойство, он не переносится на новую строчку и выходит за пределы ячейки.

Есть какие-то предложения, как это исправить? Такое происходит в FF, Chrome и IE. Вот так выглядит исходник:

Оооооооооооооооооооочень длинное слово
Слово

Текст «ооооооооооооо...чень длинный», он даже длиннее, чем страница, но он не разрывается. Я пробовал задать text-wrap:suppress и text-wrap:normal, но это также не помогло.


Ответ №1

Побробуйте сделать так. У меня заработало даже в IE. Рамки добавлены для наглядности. Обратите внимание на свойство таблицы table-layout:fixed:

<table style="table-layout: fixed; width: 100%;">
<tr>
    <td style="border:1px solid black;">Не ооооочень длинное слово</td>
    <td style="border:1px solid black; word-wrap:break-word">Ооооооооооооооооооооооооооооооооочччччччччччччччччччччччччччччччччччччччччччччччееееееееееееееееееееееееееееееееееееенннннннннннннннььььььььььььььььь длинное слово</td>
</tr>
</table>
Пример
Не ооооочень длинное слово Ооооооооооооооооооооооооооооооооочччччччччччччччччччччччччччччччччччччччччччччччееееееееееееееееееееееееееееееееееееенннннннннннннннььььььььььььььььь длинное слово

1 комментарий

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


(обязательно)