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

Question

Я использовал word-wrap: break-word для переноса текста в div с и span с. Тем не менее, он не работает в ячейках таблицы. У меня есть таблица, установленная на width:100%, с одной строкой и двумя столбцами. Текст в столбцах, хотя и оформлен с использованием вышеуказанного word-wrap, не переносится. Это заставляет текст проходить границы ячейки. Это происходит в Firefox, Google Chrome и Internet Explorer.

Вот как выглядит источник:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Длинное слово, указанное выше, превышает границы моей страницы, но не противоречит приведенному выше HTML. Я попробовал следующие предложения по добавлению text-wrap:suppress и text-wrap:normal, но ни один из них не помог.

Answer 1

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

td {
  border: 1px solid;
}

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

Answer 2

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

или

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

Answer 3

Длинный выстрел, но еще раз проверьте с Firebug (или аналогичным), что вы случайно не унаследовали следующее правило:

white-space:nowrap;

Это может переопределить указанное вами поведение разрыва строки.

Answer 4

Оказывается, нет хорошего способа сделать это. Самое близкое, что я пришел, это добавление «переполнение: скрытое»; к div вокруг стола и потерять текст. Похоже, реальным решением было бы бросить стол. Используя div и относительное позиционирование, я смог добиться того же эффекта, минус наследие <table>

ОБНОВЛЕНИЕ 2015: Это для таких, как я, которые хотят этот ответ. Спустя 6 лет это работает, спасибо всем авторам.

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

Answer 5

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

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

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Answer 6

Обходной путь, который использует overflow-wrap и отлично работает при обычной компоновке таблицы + ширина таблицы 100%

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Преимущества:

• Использует overflow-wrap:break-word вместо word-break:break-all. Что лучше, потому что сначала он пытается разбить пробелы и обрезает слово, только если слово больше его контейнера.
• Нет table-layout:fixed необходимо. Используйте свой обычный авто-размер.
• Не требуется для определения фиксированного width или фиксированного max-width в пикселях. Определите % родителя, если необходимо.

Протестировано в FF57, Chrome62, IE11, Safari11

Answer 7

Измените свой код

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>

Answer 8

Проблема с

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

заключается в том, что он будет работать не очень хорошо, когда текст имеет несколько пробелов, например,

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Если слово andthenlongerwithoutspaces вписывается в ячейку таблицы в одну строку, а long text with andthenlongerwithoutspaces - нет, длинное слово будет разбито на две, вместо переноса.

Альтернативное решение: вставить U + 200B ( ZWSP ), U + 00AD ( мягкий дефис ) или U + 200C ( ZWNJ ) в каждом длинном слове после каждого, скажем, 20-го символа (однако, см. предупреждение ниже):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Предупреждение : вставка дополнительных символов нулевой длины не влияет на чтение. Однако это влияет на текст, скопированный в буфер обмена (эти символы, конечно, также копируются). Если текст буфера обмена позже используется в какой-либо функции поиска в веб-приложении ... поиск будет прерван. Хотя это решение можно увидеть в некоторых известных веб-приложениях, по возможности избегайте его.

Предупреждение : при вставке дополнительных символов не следует разделять несколько кодовых точек внутри графемы. См. https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries для получения дополнительной информации.

Answer 9

Протестировано в IE 8 и Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Это приводит к тому, что таблица соответствует ширине страницы, а каждый столбец занимает 50% ширины.

Если вы предпочитаете, чтобы первый столбец занимал большую часть страницы, добавьте width: 80% к td, как в следующем примере, заменив 80% процентом по вашему выбору.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Answer 10

Проверьте это демо

<table style="width: 100%;">
<tr>
    <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
    </td>
    <td>
        <span style="display: inline;">Foo</span>
    </td>
</tr>
</table>

Вот ссылка на чтение