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

Question

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

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

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

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

Answer 1

Попробуйте, я думаю, что это сработает для чего-то вроде "AAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG" приведет к созданию

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;       /* css-3 */
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>

Answer 2

Использовать CSS3 word-wrap: break-word;.Работает также в браузерах на основе WebKit (Safari, Chrome).

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

Answer 3

Для автоматической разметки таблицы попробуйте стилизовать соответствующий тд, комбинируя атрибуты max-width и word-wrap.

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

Протестировано в Firefox 32, Chrome 37 и IE11.

Answer 4

Вот расширенная версия того, что спросил ОП.

Иногда, что происходит, наш клиент хочет, чтобы мы дали '-' после переноса слова до конца строки.

Как

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;

}

Я использую это.

Надеюсь, у кого-то будет такой спрос.

Answer 5

Установка ширины столбца для тега td.

Answer 6

Вы можете вручную ввести пробелы нулевой ширины () для создания точек разрыва.

Answer 7

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

Шаблон:

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

Фильтр:

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

---

Вы не можете видеть это, но после $1 появляется невидимое пространство (спасибо @kingjeffrey за подсказку), которое разрешает разрывы слов для ячеек таблицы.

Answer 8

Я думаю, что это давняя проблема в Firefox, которая восходит к Mozilla и Netscape.Держу пари, у вас возникла проблема с отображением длинных URL.Я думаю, что это проблема с механизмом рендеринга, а не то, что вы можете исправить с помощью CSS, без каких-либо отвратительных взломов.

Имеет смысл изменить дизайн.*http://hacks.mozilla.org/2009/06/word-wrap/

Answer 9

Один слегка хакерский способ сделать это - обработать текст, чтобы добавить пробел между буквами. Замените пробелы на   Затем используйте атрибут css для разделения букв.

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