Перенос слов в HTML-таблице

Следующий код работает для меня в Internet Explorer. Обратите внимание на добавление CSS-свойства table-layout: fixed.

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
    </td>
    <td>Short word</td>
  </tr>
</table>

Это свойство заставляет таблицу учитывать ширину ячеек при вычислении их размеров, что позволяет более эффективно управлять длинными словами и предотвращать выход за пределы контейнера.

Чтобы предотвратить переполнение элемента из-за длинного текста без пробелов в HTML, вы можете использовать CSS-свойство word-break: break-all;. Это свойство можно применить как к тегу <td>, так и к тегу <span>.

Пример для <td>:

<td style="word-break: break-all;">longtextwithoutspace</td>

И пример для <span>:

<span style="word-break: break-all;">longtextwithoutspace</span>

Оба варианта позволят тексту корректно переноситься на новую строку при необходимости, избегая переполнения контейнера. Выбор между этими тегами зависит от контекста использования: <td> предназначен для таблиц, а <span> — для строчных элементов.

Чтобы изменить поведение разрыва текста в вашем коде, замените свойство CSS word-wrap: break-word; на word-break: break-all;.

Вот пример, который демонстрирует это изменение:

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break: break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

В этом примере текст в первом столбце будет разрываться на слова, даже если они не содержат пробелов, благодаря word-break: break-all;. Это поможет избежать переполнения содержимого, особенно если вы работаете с длинными строками текста.

В итоге, похоже, что хорошего способа сделать это нет. Ближе всего к решению, которое я нашёл, было добавление overflow:hidden; к div, оборачивающему таблицу, но это привело к потере текста. Настоящее решение, похоже, заключается в том, чтобы вообще отказаться от таблицы. Используя div и относительное позиционирование, я смог достичь такого же эффекта, избавившись от устаревшего тега <table>.

Обновление 2015 года: Это для тех, кто, как и я, ищет этот ответ. Прошло 6 лет, и это работает, спасибо всем участникам.

* { /* это работает для всего, кроме td */
  word-wrap: break-word;
}

table { /* это почему-то делает так, чтобы работало для td */
  table-layout: fixed;
  width: 100%;
}

Как уже упоминалось, обернуть текст в div почти решает проблему. Вам лишь необходимо указать width для div, что, к счастью, подходит для статических макетов.

Это работает в FF 3.6, IE 8, Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Длинный контент здесь -->
  </div>
</td>