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

566

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

psychotik
источник
добавить жесткий дефис. <tr> <td style = "text-wrap: normal; word-wrap: break-word"> Это предварительное предложение. </ td> </ tr>
adatapost
К сожалению, текст там взят из пользовательского контента. Конечно, я мог бы предварительно обработать его и добавить дефис, но я надеялся, что будет лучший способ.
психотик
Я прошу прощения за использование слова «жесткий дефис». В HTML простой дефис представлен символом «-» (& # 45; или & # x2D;). Мягкий дефис представлен ссылкой на символьную сущность & shy; (& # 173; или & # xAD;)
adatapost
Вы действительно используете <code> break-wor <em> k </ em> </ code>? Может быть, это как-то связано с этим.
Ms2ger
1
Если вы здесь, вы можете посмотреть на white-space: pre-wrap developer.mozilla.org/en-US/docs/Web/CSS/white-space
Том Пратс

Ответы:

624

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

Марк Стобер
источник
@ewomac да, иногда мне просто нужно игнорировать ошибки VS2010 о HTML / CSS, если я знаю, что это будет работать в браузере.
Марк Стобер
2
@marc !! чувак, большое спасибо за это. Мне было поручено создать мобильную версию клиентского сайта, использующего таблицы, и у меня возникли проблемы с этим! таблица-раскладка: исправлено
отладка
17
Это делает другие столбцы слишком широкими.
Clément
2
Обязательно прочитайте developer.mozilla.org/en-US/docs/Web/CSS/table-layout Ширина таблицы и столбца задается шириной элементов таблицы и столбца или шириной первого ряда ячеек. Ячейки в последующих строках не влияют на ширину столбцов. Похоже, это также хорошо для производительности.
Сэм Барнум
2
@ Климент, см. Ответ Индрека ниже <colgroup>, он исправил это для меня.
andrewtweber
164
<td style="word-break:break-all;">longtextwithoutspace</td>

или

<span style="word-break:break-all;">longtextwithoutspace</span>
Пратик Стивен
источник
Могу подтвердить, что подход Пратика работает и в Safari на iOS (iPhone).
occulus
Чтобы обойти проблему с некоторыми короткими и несколькими длинными словами, вы могли бы предварительно обработать текст и обернуть только длинные слова (скажем,> 40 символов) в <span>.
nornagon
9
это не поддерживает firefox, опера
meotimdihia
5
это не делалось преимущественно на несловарные символы (например, если бы у меня была серия более коротких слов, разделенных пробелами, она всегда выполняла бы слова вплоть до строки, а затем разбивала последнее слово пополам). Word-wrapбудет нарушать слова только когда это необходимо
Hashbrown
Этот подход лучше, потому что не требует table-layout: fixed;.
Finesse
125

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

white-space:nowrap;

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

Рик Гранди
источник
Это то, что было унаследовано и сломало слово «обертка» для меня
Шейн Ли,
@RickGrundy Что вы измените, если у вас есть эта проблема?
cokedude
7
@cokedude Я слишком поздно здесь, но этоwhite-space:normal;
Beer Me
46

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

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

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

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>
loungerdork
источник
2
Вы можете добавить min-width: 100%вместе, widthчтобы убедиться, что divзанимает всю ячейку.
user1091949
Я хочу сделать перенос слов запятой (,). Как Long,Long,Long,Long,Long. Я хочу обернуть это после любой запятой (,).
Картикеян
20

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

Alph.Dev
источник
Хотя этот хак действительно работает во всех браузерах, имейте в виду, что спецификация CSS не гарантирует этого. Согласно w3.org/TR/CSS21/visudet.html#propdef-max-width , «минимальная ширина» и «максимальная ширина» для таблиц, встроенных таблиц, ячеек таблицы, столбцов таблицы и групп столбцов неопределенный " .
Марк Амери
17

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

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>

Дык нгуен
источник
-1; это заставляет браузер полностью игнорировать разрывы слов и разрывы в середине слов, даже если в этом нет необходимости. Это редко желаемое поведение и, по-видимому, не то поведение, которое хотел ОП, иначе они не использовали бы его break-wordв первую очередь.
Марк Эмери
16

Проблема с

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

Петр Финдейзен
источник
Возможно, результат этого будет немного лучше, если в достаточно длинные слова вы вставите мягкий дефис после каждого символа, чтобы браузер мог надежно разбить слово на правом краю содержащего элемента.
Марк Амери
Хотя это жизнеспособное решение, казалось бы, безобидное предложение добавить что-то «после каждого, скажем, 20-го символа» чревато ловушками, если вы хотите сделать это программно на своем сервере. Итерации над символами из строки Unicode трудно в большинстве языков программирования. В лучшем случае язык может облегчить итерацию по кодовым точкам Unicode, но это не обязательно то, что мы хотели бы назвать «символами» (например, могут быть записаны как две кодовые точки). Мы, вероятно, на самом деле имеем в виду «графемы», но я не знаю ни одного языка, который бы упрощал их обход.
Марк Амери
1
@MarkAmery ты прав. Тем не менее, даже с простым ASCII это не очень хорошо. Я добавил «предупреждения».
Петр Финдейзен
14

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

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

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

AabinGunz
источник
-1; Использование break-allприведет к тому, что браузер полностью проигнорирует разрывы слов при принятии решения о том, где ставить разрывы строк, с тем эффектом, что даже если ваша ячейка содержит нормальную прозу без каких-либо очень длинных слов, вы в конечном итоге получите разрывы строк в середине слов. Это обычно нежелательно.
Марк Амери
10

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

Единственное, что нужно сделать, - это добавить ширину к внутренней <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>
Шалом Сэм
источник
1
Это в основном просто повторяет то, что ответ Лоунгердорка уже говорил месяцами ранее, без добавления какой-либо новой информации или понимания.
Марк Амери
Это сработало для меня
core114
8

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

В этом случае вы должны использовать 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
<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>
Саравут Позитвинью
источник
1
-1 как за отсутствие объяснений, так и за плохое решение. Размещение содержимого внутри фиксированной ширины пикселя pв ячейке таблицы, которая не имеет фиксированной ширины пикселя, почти наверняка приведет к pпереполнению или невозможности заполнения ячейки таблицы.
Марк Амери
8

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

stslavik
источник
5

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

<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-layout: fixed, но уже есть гораздо более старый ответ, предлагающий это, так что этот ответ не добавляет никакой новой информации.
Марк Амери
4

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

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}
сплавление
источник
Уже есть более старый ответ, предлагающий использовать table-layout: fixed; этот не добавляет ничего нового на страницу.
Марк Амери
4

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

Йогурт Мудрый
источник
2

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

td {
   display: table-cell;
}
ironsam
источник
-1; текст в любом элементе HTML по умолчанию переносится, а не только в таблицы. Предложение здесь не имеет никакого смысла.
Марк Амери
1

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.

Бобби
источник
Это в основном дубликат в качестве ответа с наибольшим количеством голосов ; в обоих случаях раствор сводится к «использованию table-layout: fixed».
Марк Амери
0

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

Антуан Гираль
источник
0

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

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

<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>
Адарш Сингх
источник