Как обернуть текст без пробелов внутри <td>?

Я использовал:

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

и текст переносится в Chrome, но не в Firefox.

Обновление: я решил изменить дизайн, чтобы он не нуждался в обертке; Попытка разобраться с исправлением / взломом CSS оказалась слишком сложной и отнимала много времени.

Попробуйте это, я думаю, это сработает для чего-то вроде "AAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGG"

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 между буквами, чтобы уменьшить пробелы.

Я знаю, это хак ... но если НИЧЕГО еще не работает, это должно быть завершено без проблем.