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

Ответ 1

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

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>

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 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;

}

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

Я знаю, это взлом... но если ничего не работает, он должен обернуться без проблем.

Ответ 8

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

Имеет смысл изменить дизайн.

Это выглядело обнадеживающим: http://hacks.mozilla.org/2009/06/word-wrap/

Ответ 9

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

Шаблон:

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

Фильтр:

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

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