Для разного контента нужны разные правила форматирования: фрагменты кода должны сохранять все переносы строк и табуляцию; текст, написанный случайным посетителем сайта, не должен «порвать» вёрстку и т.п. Форматирование можно контролировать с помощью CSS.
Свойство white-space
CSS свойство white-space описывает то, как будут обрабатываться пробельные символы внутри элемента.
Новая строка | Пробелы и табуляция | Перенос текста | |
---|---|---|---|
normal | схлопывается | схлопываются | есть |
nowrap | схлопывается | схлопываются | нет |
pre | остаётся | остаются | нет |
pre-wrap | остаётся | остаются | есть |
pre-line | остаётся | схлопываются | есть |
Значения pre-wrap
и pre-line
доступны во всех современных версиях браузеров и в IE начиная с версии 8.0.
Подробнее o white-space на w3.org
Свойство word-wrap
Изначально это свойство появилось в линейке браузеров IE и только потом перекочевало в другие браузеры, так и не появившись в спецификации CSS2. В CSS3 аналогичное поведение закреплено за свойством overflow-wrap, а word-wrap останется в качестве псевдонима.
Это свойство может принимать значения:
- normal
Переносы строк будут формироваться только в дозволенных позициях.
- break-word
Слово будет разрываться, если в пределах строки нет подходящей позиции для переноса строки.
Это свойство можно использовать для переноса строк в теге <pre>
даже в старых версиях IE:
pre {
word-wrap: break-word; /* IE 5.5-7 */
white-space: pre-wrap; /* current browsers */
}
Подробнее o word-wrap (overflow-wrap) на w3.org
Свойство word-break
Когда нужно применить «грубую силу» и переносить любую строку в любом месте (я даже не представляю себе где это может потребоваться), то в дело вступает word-break.
.text_user-generated_yes {
word-break: break-all;
}
Это свойство имеет больший приоритет, чем word-wrap (overflow-wrap) и будет разрывать слова даже там, где это особо и не требуется.
В браузерах на Webkit это свойство имеет ещё одно нестандартное значение – break-word, которое по своему действию аналогично word-wrap .
Подробнее o word-break на w3.org
Свойство hyphens
С нетерпением ждём, когда браузеры начнут делать автоматическую расстановку переносов в словах.
.text {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Основным препятствием на пути внедрения этой технологии стоит то, что браузеру требуется описание правил переноса слов для различных языков. На сегодняшний день только Safari и Firefox могут похвастаться этим.
Коментарии к заметке
word-break: break-all; пригождалось, когда постят в сообщениях длинные url.
По-моему,
word-wrap: break-word
тоже годится для этого. Разница между ними будет в том, что word-wrap , скорее всего сделает перенос где-нибудь на пунктуации в URL, а word-break сделает перенос точно по размеру строки. Поправь меня, если я ошибаюсь.Текст от пользователя с неразрывными пробелами.