Word-wrap в таблице HTML

Я использовал word-wrap: break-word для переноса текста в div и span s. Тем не менее, он не работает в ячейках таблицы. У меня есть таблица с 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>

ОТВЕТЫ

Ответ 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>

Ответ 2

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

или

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

Ответ 4

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

2015 UPDATE: Это для тех, кто любит этот ответ. Через 6 лет это работает, благодаря всем вкладчикам.

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

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 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>

Ответ 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>

Ответ 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>

Ответ 10

Текст из http://www.w3.org/TR/css3-text/#word-wrap

Это свойство указывает, может ли UA сломаться в слове, чтобы предотвратить переполнение, когда строка с нерушимой строкой слишком длинная, чтобы она помещалась в поле строки. Это имеет эффект, когда "text-wrap" является либо "нормальным", либо "подавляющим". Возможные значения

Ответ 11

Посмотрите это демо

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

Ответ 12

Единственное, что нужно сделать, - это добавить ширину к <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>

Ответ 13

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

Ответ 14

Похоже, вам нужно установить 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>

Ответ 15

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

В этом случае вы должны использовать теги 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>

Ответ 16

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

<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 {
      table-layout: fixed;
      width: 100%
   }

</style>

Ответ 17

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

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

Ответ 18

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

td {
   display: table-cell;
}

Ответ 19

Я нашел решение, которое работает в 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>

Ответ 20

Из-за отсутствия исполняемых фрагментов кода:

Без стилей

td {
  border: 1px solid gold;
}
<table>
  <tr>
    <td>
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

Ответ 21

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.

Ответ 22

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