Обгортання слів у таблиці 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;

Це може змінити вказану поведінку розриву лінії.

Виявляється, немає хорошого способу зробити це. Найближче, до якого я прийшов, додає "переповнення: приховано;" до діва навколо столу і втрачаючи текст. Справжнє рішення, мабуть, полягає в тому, що стіл канавки. Використовуючи divs та відносне позиціонування, я зміг досягти такого ж ефекту, за вирахуванням спадщини<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>

Обхід, який використовує переповнення і добре працює при нормальному розташуванні таблиці + ширина столу 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 = "таблиця-макет: фіксовано; ширина: 98%; обгортання слів: слово розбиття"

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