Я использовал:
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>
word-break: break-word;Используйте CSS3
word-wrap: break-word;. Также работает в браузерах на базе WebKit (Safari, Chrome).Обновление : я забыл, однако, рассматриваемый элемент должен быть либо неявно, либо явно позиционирован как фиксированный элемент или отображаться как блочный элемент. Для ячеек таблицы (
td) используйтеdisplay: inline-block;.источник
display: inline-block;.Вот расширенная версия того, о чем просил OP.
Иногда случается так, что наш клиент хочет, чтобы мы поставили «-» после разрыва слова до конца строки.
подобно
перерыв на
Итак, есть новое свойство 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.
источник
max-width, а не сwidth. Тем не менее, лучшее решение для меня, потому что оно не разбивает слова в произвольных точках.Вы можете вручную ввести пробелы нулевой ширины (& # 8203;) для создания точек останова.
источник
<wbr>[для «разрыва слова»]. Вот поддержка браузером для этого и​решение: quirksmode.org/oddsandends/wbr.htmlУстановите ширину столбца для
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 между буквами, чтобы уменьшить пробелы.Я знаю, это хак ... но если НИЧЕГО еще не работает, это должно быть завершено без проблем.
источник