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

Я использовал, 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, но ни один не помог.

Следующее работает для меня в 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>

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

или

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

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

white-space:nowrap;

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

Оказывается, нет хорошего способа сделать это. Самое близкое, что я пришел, это добавление «переполнение: скрытое»; к 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%;
}

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

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

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

Обходной путь, который использует 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

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

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>

Проблема с

<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 для получения дополнительной информации.

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

   <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>

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

Протестировано в 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>

Единственное, что нужно сделать, - это добавить ширину к внутренней <td>или <div>внутренней части в <td>зависимости от макета, который вы хотите достичь.

например:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

или

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

Ответ, который выиграл награду, является правильным, но он не работает, если первая строка таблицы имеет объединенную ячейку (все ячейки имеют одинаковую ширину).

В этом случае вы должны использовать colgroupи colтег , чтобы отобразить его должным образом:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Похоже, вам нужно установить word-wrap:break-word;на элемент блока ( div), с указанной (не относительной) шириной. Пример:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

или, воспользовавшись предложением word-break:break-allАбхишека Саймона.

Это работает для меня:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

И атрибут таблицы:

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

Если вам не нужна граница таблицы, примените это:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Я нашел решение, которое работает в Firefox, Google Chrome и Internet Explorer 7-9. Для раскладки таблицы из двух столбцов с длинным текстом на одной стороне. Я все время искал похожую проблему, и то, что работало в одном браузере, сломало другое, или добавление дополнительных тегов в таблицу просто кажется плохим кодированием.

Я НЕ использовал таблицу для этого. DL DT DD на помощь. По крайней мере, для исправления двухколоночной разметки, это в основном глоссарий / словарь / настройка значения слова.

И немного общего стиля.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

Используя плавающий перенос слов и оставленное поле, я получил именно то, что мне было нужно. Просто подумал, что поделюсь этим с другими, может быть, это поможет кому-то другому с макетом стиля определения из двух столбцов, с трудностями при получении слов для переноса.

Я попытался использовать перенос слов в ячейке таблицы, но он работал только в Internet Explorer 9 (и, конечно, в Firefox и Google Chrome), пытаясь исправить поврежденный браузер Internet Explorer здесь.

Таблицы переносятся по умолчанию, поэтому убедитесь, что отображаются ячейки таблицы table-cell:

td {
   display: table-cell;
}

style = "table-layout: fixed; width: 98%; перенос по словам: break-word"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Демо - http://jsfiddle.net/Ne4BR/749/

Это отлично сработало для меня. У меня были длинные ссылки, из-за которых таблица превышала 100% в веб-браузерах. Протестировано на IE, Chrome, Android и Safari.

Решение, которое работает с Google Chrome и Firefox (не протестировано с Internet Explorer), заключается в установке display: table-cellв качестве элемента блока.

Вы можете попробовать это, если вам подходит ...

Поместите текстовую область в ваш тд и отключите его белым цветом фона и определите его количество строк.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>