От автора: свойство overflow-wrap позволяет браузеру разрывать строку текста в заданном элементе на несколько строк в том месте, где этого быть не должно. Это помогает избежать такой проблемы, когда очень длинная строка вылезает за пределы макета.
|
1 2 3 |
.example { overflow-wrap: break-word; } |
Значения
normal: значение по умолчанию. Браузер разрывает строки по стандартным правилам разрыва. Слова и неразрывные строки не отделяются, даже если они выходят за рамки контейнера.
break-word: слова или строки символов, которые не вмещаются в контейнер, разрываются в произвольном месте и часть символов переходит на новую строку. Тире не вставляется, даже если указано свойство hyphens.
inherit: целевой элемент наследует значение свойства overflow-wrap от ближайшего родителя.
В демо ниже есть специальная кнопка переключения между значениями normal и break-word.
Для демонстрации той проблемы, которую призвано решить свойство overflow-wrap, в демо выше используется очень длинное слово, заключенное в маленький контейнер. При переключении на break-word слово разбивается так, чтобы вместиться в небольшое отведенное пространство, как если бы это было несколько слов.
Строка из неразрывных пробелов ( ) будет также разорвана в подходящем месте.
Свойство overflow-wrap удобно использовать на элементах с непроверяемым контентом, который создают пользователи (комментарии). Оно спасет ваш макет от длинных URL’ов и других неразрывных строк текста (например, вандализма).
Сходство со свойством word-break
Свойства overflow-wrap и word-break очень похожи, их можно использовать для решения одних и тех же проблем. Краткое обобщение различий, объясненных в CSS спецификации:
overflow-wrap в основном используется для разрыва длинных строк, ломающих макеты, когда текст вылезает за пределы контейнера;
word-break устанавливает мягкие способы разрыва букв, в основном ассоциируется с китайским, японским и корейским языками (CJK).
После примеров использования свойства word-break в CJK контенте спецификация говорит: «если нужно разорвать строку только из-за того, что она вылезает за пределы контейнера, смотрите свойство overflow-wrap».
Теперь мы можем предположить, что свойство word-break подходит для неанглийского контента, в котором нужны определенные правила разрыва слов. Эти правила могут перемешиваться с английским контентом. Свойство overflow-wrap необходимо использовать для предотвращения поломки макета из-за слишком длинных строк, вне зависимости от языка.
История свойства word-wrap
Свойство overflow-wrap является потомком свойства word-wrap. Свойство word-wrap изначально было свойством только для IE, но в конечном итоге стало поддерживаться во всех браузерах. Однако стандартом оно так и не стало.
Свойство word-wrap принимает те же значения, что и overflow-wrap, и ведет себя точно так же. В спецификации говорится, что браузеры «должны распознавать word-wrap как альтернативное название свойства overflow-wrap, как если бы это была сокращенная версия данного свойства». Также все юзер агенты должны постоянно поддерживать свойство word-wrap для совместимости со старыми версиями.
Оба свойства overflow-wrap и word-wrap проходят CSS валидацию при проверке на CSS3 и выше (сейчас по умолчанию).
Поддержка в браузерах
Данные о поддержке взяты с сайта Caniuse, где также сказано, что свойство находится в статусе W3C Working Draft.
«Частичная» поддержка на сайте CanIUse вызвана тем, что старые браузеры поддерживают старое свойство word-wrap, а не overflow-wrap. Использование обоих свойств обеспечит вам обратную совместимость.
В редакторском черновике спецификации на W3C прописано новое значение break-spaces, которое работает с «зарезервированным» символами пробела. Данное значение не поддерживается ни в одном браузере и не прописано в рабочем черновике спецификации.
Автор: Louis Lazaris
Источник: //css-tricks.com/
Редакция: Команда webformyself.
