Як обернути текст без пробілів всередині <td>?

Я використовував:

word-break:break-all;
table-layout:fixed;

а текст обгортається в Chrome, але не у Firefox.

Оновлення: я вирішив змінити дизайн, щоб він не потребував обгортання; спроба розібратися з виправленням / руйнуванням CSS виявилася занадто неприємною та трудомісткою.

Спробуйте це, я думаю, це спрацює приблизно на зразок "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGG" дасть "

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Я взяв свій приклад із кількох різних веб-сайтів у Google. Я тестував це на ff 5.0, IE 8.0 та Chrome 10.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Використовуйте CSS3 word-wrap: break-word;. Працює також у браузерах на базі WebKit (Safari, Chrome).

Оновлення : я забув, однак елемент, про який йде мова, повинен бути неявно або явно позиціонований як фіксований елемент або відображатися як елемент блоку. Для комірок таблиці ( td) використовуйте display: inline-block;.

Ось розширена версія того, що запитав OP.

Іноді трапляється так, що наш клієнт хоче, щоб ми дали «-» після перерви слова до кінця рядка.

Люблю

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

перерва на

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Отже, є нова властивість CSS, якщо вона підтримується, як правило, підтримується в останніх браузерах.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Я використовую цей.

Сподіваюся, хтось матиме такий попит.

Для автоматичного розміщення таблиці спробуйте сформулювати відповідний td, поєднуючи атрибути max-width та word-wrap.

Наприклад: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Тестується у Firefox 32, Chrome 37 та IE11.

Ви можете вручну вводити пробіли нульової ширини (& # 8203;) для створення точок розриву.

Встановіть ширину стовпця для tdтегу.

Я думаю, що це давня проблема у Firefox, яка повертається до Mozilla та Netscape. Б'юсь об заклад, у вас була проблема з відображенням довгих URL-адрес. Я думаю, що це проблема з механізмом візуалізації, а не те, що ви можете виправити за допомогою CSS, без потворних хаків.

Має сенс змінити дизайн.

Однак це виглядало сподівальним: http://hacks.mozilla.org/2009/06/word-wrap/

Я використовую Angular для свого проекту, і мені вдалося вирішити це за допомогою простого фільтра:

Шаблон:

<td>{{string | wordBreak}}</td>

Фільтр:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

Ви не можете цього побачити, але після $1 цього з’являється невидимий простір (спасибі @kingjeffrey за підказку), який увімкнув розриви слів для комірок таблиці.

Один злегка хакерський спосіб зробити це - обробити текст, щоб додати пробіл між кожною літерою. Замінити пробіли на  Потім використовуйте атрибут css для розміщення літер, щоб зменшити пробіли.

Я знаю, це хакерство ... але якщо НІЩО ще не працює, це повинно обернутися без проблем.