it-swarm.com.ru

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

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

526
psychotik

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

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="Word-wrap: break-Word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>
592
Marc Stober
<td style="Word-break:break-all;">longtextwithoutspace</td>

или же

<span style="Word-break:break-all;">longtextwithoutspace</span>
145
Pratik Stephen

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

white-space:nowrap;

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

115
Rick Grundy

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

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

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

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

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

18
Alph.Dev

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

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>
17
Duc Nguyen

Проблема с

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

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

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

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

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

15
Piotr Findeisen

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

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

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

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

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

9
abi1964

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

В этом случае вы должны использовать теги 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>
8
Indrek
<p style="overflow:hidden; width:200px; Word-wrap:break-Word;">longtexthere<p>
8
Sarawut Positwinyu

Похоже, вам нужно установить 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 по предложению Абхишека Саймона.

7
stslavik

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

<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>
5
Lavekush Agrawal

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

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    Word-wrap: break-Word;
}
4
Fusion

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

td {
   display: table-cell;
}
3
ironsam

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

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

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

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

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

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

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

3
Yogurt The Wise

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.

1
Bobby

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

0
Antoine Guiral