Перенос строк
Классы задают, можно ли разорвать слово, которое не помещается в ширину блока. Берите их для ссылок, адресов почты, идентификаторов и других длинных строк без пробелов в узких колонках.
Пример
Один и тот же текст с длинной ссылкой в блоке одинаковой ширины.
text-break-normal
Ссылка https://example.com/catalog/products/super-long-identifier-without-spaces в узкой колонке
text-break-word
Ссылка https://example.com/catalog/products/super-long-identifier-without-spaces в узкой колонке
text-break-all
Ссылка https://example.com/catalog/products/super-long-identifier-without-spaces в узкой колонке
Классы
| Класс | CSS | Значения |
|---|---|---|
text-break-normal |
word-wrap: normal; word-break: normal |
— |
text-break-word |
word-wrap: break-word |
— |
text-break-all |
word-break: break-all |
— |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
| Класс | Что делает |
|---|---|
text-break-word |
разрывает слово, только если оно не помещается в строку целиком |
text-break-all |
разрывает любое слово в конце строки, чтобы заполнить её |
text-break-normal |
не разрывает слова: длинное слово выходит за блок |
Абзацы, списки, таблицы и цитаты уже разрывают слова, которые не помещаются:
это задаёт базовый стиль Framework. text-break-normal отменяет такой
разрыв, text-break-word включает его у других элементов:
<span class="text-break-word">https://example.com/catalog/products/super-long-identifier</span>
Ограничения
text-break-allразрывает и короткие слова, текст читается хуже. Берите его для кода и идентификаторов, а не для обычного текста.- Классы не расставляют дефисы: для переноса по слогам нужно свойство
hyphensи атрибутlang. - У семейства нет префиксов ширины экрана и состояний.