Свойство overflow-wrap

Свойство overflow-wrap

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

.example {
  overflow-wrap: break-word;
}

Значения

normal: значение по умолчанию. Браузер разрывает строки по стандартным правилам разрыва. Слова и неразрывные строки не отделяются, даже если они выходят за рамки контейнера.

break-word: слова или строки символов, которые не вмещаются в контейнер, разрываются в произвольном месте и часть символов переходит на новую строку. Тире не вставляется, даже если указано свойство hyphens.

inherit: целевой элемент наследует значение свойства overflow-wrap от ближайшего родителя.

В демо ниже есть специальная кнопка переключения между значениями normal и break-word.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Для демонстрации той проблемы, которую призвано решить свойство overflow-wrap, в демо выше используется очень длинное слово, заключенное в маленький контейнер. При переключении на break-word слово разбивается так, чтобы вместиться в небольшое отведенное пространство, как если бы это было несколько слов.

Строка из неразрывных пробелов ( ) будет также разорвана в подходящем месте.

Свойство overflow-wrap удобно использовать на элементах с непроверяемым контентом, который создают пользователи (комментарии). Оно спасет ваш макет от длинных URL’ов и других неразрывных строк текста (например, вандализма).

Сходство со свойством word-break

Свойства overflow-wrap и word-break очень похожи, их можно использовать для решения одних и тех же проблем. Краткое обобщение различий, объясненных в CSS спецификации:

overflow-wrap в основном используется для разрыва длинных строк, ломающих макеты, когда текст вылезает за пределы контейнера;

word-break устанавливает мягкие способы разрыва букв, в основном ассоциируется с китайским, японским и корейским языками (CJK).

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее

После примеров использования свойства 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.

Свойство overflow-wrap

«Частичная» поддержка на сайте CanIUse вызвана тем, что старые браузеры поддерживают старое свойство word-wrap, а не overflow-wrap. Использование обоих свойств обеспечит вам обратную совместимость.

В редакторском черновике спецификации на W3C прописано новое значение break-spaces, которое работает с «зарезервированным» символами пробела. Данное значение не поддерживается ни в одном браузере и не прописано в рабочем черновике спецификации.

Автор: Louis Lazaris

Источник: https://css-tricks.com/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree