Перенос слов в 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, но ни один не помог.

11.08.2009 04:01:28
добавить жесткий дефис. <tr> <td style = "text-wrap: normal; word-wrap: break-word"> Это предварительное предложение. </ td> </ tr>
adatapost 11.08.2009 06:27:40
К сожалению, текст там взят из пользовательского контента. Конечно, я мог бы предварительно обработать его и добавить дефис, но я надеялся, что будет лучший способ.
psychotik 11.08.2009 06:36:50
Я прошу прощения за использование слова «жесткий дефис». В HTML простой дефис представлен символом «-» (& # 45; или & # x2D;). Мягкий дефис представлен ссылкой на символьную сущность & shy; (& # 173; или & # xAD;)
adatapost 11.08.2009 06:58:41
Вы действительно используете <code> break-wor <em> k </ em> </ code>? Может быть, это как-то связано с этим.
Ms2ger 11.08.2009 09:15:56
Если вы здесь, вы можете посмотреть на white-space: pre-wrap developer.mozilla.org/en-US/docs/Web/CSS/white-space
Tom Prats 5.08.2014 15:43:18
21 ОТВЕТ

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

td {
   display: table-cell;
}
3
11.08.2009 05:19:51
-1; текст в любом элементе HTML по умолчанию переносится, а не только в таблицы. Предложение здесь не имеет никакого смысла.
Mark Amery 20.01.2019 17:30:32

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

white-space:nowrap;

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

125
2.06.2014 18:43:04
Это то, что было унаследовано и сломало слово «обертка» для меня
shane lee 7.02.2013 10:55:39
@RickGrundy Что вы измените, если у вас есть эта проблема?
cokedude 30.06.2014 16:02:16
@cokedude Я слишком поздно здесь, но этоwhite-space:normal;
Beer Me 20.01.2016 19:30:04

Оказывается, нет хорошего способа сделать это. Самое близкое, что я нашел, - это добавление «переполнения: скрыто»; к 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%;
}
46
19.09.2015 18:39:51
<td style="word-break:break-all;">longtextwithoutspace</td>

или

<span style="word-break:break-all;">longtextwithoutspace</span>
160
8.10.2009 17:01:45
Могу подтвердить, что подход Пратика работает и в Safari на iOS (iPhone).
occulus 24.03.2011 14:43:02
Чтобы обойти проблему с некоторыми короткими и несколькими длинными словами, вы могли бы предварительно обработать текст и обернуть только длинные слова (скажем,> 40 символов) в <span>.
nornagon 2.06.2011 08:30:16
это не поддерживает firefox, опера
meotimdihia 8.07.2011 22:24:37
это не делалось преимущественно на несловарные символы (например, если бы у меня была серия более коротких слов, разделенных пробелами, она всегда выполняла бы слова вплоть до строки, а затем разбивала последнее слово пополам). Word-wrapбудет нарушать слова только при необходимости
Hashbrown 7.03.2016 00:31:37
Этот подход лучше, потому что не требует table-layout: fixed;.
Finesse 7.04.2017 01:40:36

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

619
29.05.2015 23:34:10
@ewomac да, иногда мне просто нужно игнорировать ошибки VS2010 о HTML / CSS, если я знаю, что это будет работать в браузере.
Marc Stober 11.08.2011 16:19:31
@marc !! чувак, большое спасибо за это. Мне было поручено создать мобильную версию клиентского сайта, использующего таблицы, и у меня возникли проблемы с этим! таблица-раскладка: исправлено
debug 14.09.2011 21:47:34
Это делает другие столбцы слишком широкими.
Clément 13.12.2011 10:55:46
Обязательно прочитайте developer.mozilla.org/en-US/docs/Web/CSS/table-layout Ширина таблицы и столбца задается шириной элементов таблицы и столбца или шириной первого ряда ячеек. Ячейки в последующих строках не влияют на ширину столбцов. Похоже, это также хорошо для производительности.
Sam Barnum 9.08.2013 01:41:35
@ Климент, см. Ответ Индрека ниже <colgroup>, он исправил это для меня.
andrewtweber 29.12.2014 21:46:33

Проблема с

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

16
21.01.2019 19:56:17
Возможно, результат этого будет несколько лучше, если в достаточно длинных словах вы вставляете мягкий дефис после каждого символа, чтобы браузер мог надежно разбить слово по правому краю содержащего элемента.
Mark Amery 20.01.2019 18:06:28
Хотя это жизнеспособное решение, казалось бы, безобидное предложение добавить что-то «после каждого, скажем, 20-го символа» чревато ловушками, если вы хотите сделать это программно на своем сервере. Перебор символов в строке Unicode затруднен в большинстве языков программирования. В лучшем случае язык может облегчить итерацию по кодовым точкам Unicode, но это не обязательно то, что мы хотели бы назвать «символами» (например, могут быть записаны как две кодовые точки). Мы, вероятно, на самом деле имеем в виду «графемы», но я не знаю ни одного языка, который бы упрощал их обход.
Mark Amery 20.01.2019 18:17:48
@MarkAmery ты прав. Тем не менее, даже с простым ASCII это не очень хорошо. Я добавил «предупреждения».
Piotr Findeisen 21.01.2019 19:57:30

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

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

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>
29
20.01.2019 17:46:03
Вы можете добавить min-width: 100%вместе, widthчтобы убедиться, что divзанимает всю ячейку.
user1091949 16.02.2016 08:24:00
Я хочу сделать перенос слов запятой (,). Как Long,Long,Long,Long,Long. Я хочу обернуть это после любой запятой (,).
Karthikeyan 9.04.2019 09:30:06
<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>
8
25.08.2013 01:23:23
-1 как за отсутствие каких-либо объяснений, так и за плохое решение. Размещение содержимого внутри фиксированной ширины пикселя pв ячейке таблицы, которая не имеет фиксированной ширины пикселя, почти наверняка приведет к pпереполнению или невозможности заполнения ячейки таблицы.
Mark Amery 20.01.2019 17:41:49

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

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

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

11
24.09.2019 12:53:09
-1; использование break-allзаставит браузер полностью игнорировать разрывы слов при принятии решения о том, где ставить разрывы строк, с тем эффектом, что даже если ваша ячейка содержит обычную прозу без каких-либо очень длинных слов, вы в конечном итоге получите разрывы строк в середине слов. Это обычно нежелательно.
Mark Amery 20.01.2019 17:55:28

Протестировано в 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
20.01.2019 17:01:35

Единственное, что нужно сделать, - это добавить ширину к внутренней <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>
10
20.01.2019 17:02:07
Это в основном повторяет то, что ответ Лоунгердорка уже говорил месяцами ранее, без добавления какой-либо новой информации или понимания.
Mark Amery 20.01.2019 17:53:12
Это сработало для меня
core114 17.01.2020 06:05:20

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

8
20.01.2019 17:34:05

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

0
2.06.2014 18:40:12

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

3
24.09.2019 14:29:00

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

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

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

<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
2.06.2014 18:39:30
Как и несколько других ответов, здесь используется ключевой бит, который заставляет его работать table-layout: fixed, но уже есть гораздо более старый ответ, предлагающий это, так что этот ответ не добавляет никакой новой информации.
Mark Amery 20.01.2019 17:32:41

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
20.01.2019 17:20:18
Это в основном дубликат в качестве ответа с наибольшим количеством голосов ; в обоих случаях решение сводится к «использованию table-layout: fixed».
Mark Amery 20.01.2019 17:21:32

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

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}
4
11.12.2015 13:43:53
Уже есть более старый ответ, предлагающий использовать table-layout: fixed; этот не добавляет ничего нового на страницу.
Mark Amery 20.01.2019 17:31:43

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

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
20.01.2019 17:01:00
-1; это заставляет браузер полностью игнорировать разрывы слов и разрывы в середине слов, даже если в этом нет необходимости. Это редко желаемое поведение и, по-видимому, не то поведение, которое хотел ОП, иначе они не использовали бы его break-wordв первую очередь.
Mark Amery 20.01.2019 17:05:54

Обходной путь, который использует 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
5.01.2018 22:08:05
Хотя этот хак действительно работает во всех браузерах, имейте в виду, что спецификация CSS не гарантирует этого. Согласно w3.org/TR/CSS21/visudet.html#propdef-max-width , «минимальная ширина» и «максимальная ширина» для таблиц, встроенных таблиц, ячеек таблицы, столбцов таблицы и групп столбцов неопределенный " .
Mark Amery 20.01.2019 17:19:44

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

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

<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>
0
29.01.2020 06:55:37