overflow-wrap

Утилиты для управления переносом строк внутри слов в переполняющемся элементе.

Class Styles

Class	Styles
`wrap-break-word`	`overflow-wrap: break-word;`
`wrap-anywhere`	`overflow-wrap: anywhere;`
`wrap-normal`	`overflow-wrap: normal;`

wrap-break-word

overflow-wrap: break-word;

wrap-anywhere

overflow-wrap: anywhere;

wrap-normal

overflow-wrap: normal;

Примеры

Перенос в середине слова

Используйте утилиту wrap-break-word для разрешения переноса строк между буквами в слове при необходимости:

Самое длинное слово в любом из основных словарей английского языка - это pneumonoultramicroscopicsilicovolcanoconiosis, слово, которое относится к легочному заболеванию, полученному от вдыхания очень мелких частиц кремнезема, особенно из вулкана; с медицинской точки зрения, это то же самое, что и силикоз.

<p class="wrap-break-word">Самое длинное слово в любом из основных...</p>

Перенос в любом месте

Утилита wrap-anywhere ведет себя аналогично wrap-break-word, за исключением того, что браузер учитывает переносы строк в середине слова при вычислении внутреннего размера элемента:

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

Обычный перенос

Используйте утилиту wrap-normal для разрешения переноса строк только в естественных точках переноса, таких как пробелы, дефисы и знаки препинания:

<p class="wrap-normal">Самое длинное слово в любом из основных...</p>

Адаптивный дизайн

Префикс an overflow-wrap утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<p class="wrap-normal md:wrap-break-word ...">  Lorem ipsum dolor sit amet...</p>

Подробнее об использовании вариантов читайте в документации по вариантам.