Перенос строк (word-break)link

https://dev.ru.simai.io/ru/ui/utility/typography/word-break.php

С помощью модификаторов можно управлять переносом строк, когда слова не помещаются в отведённую ширину.

Таблица классовlink

Класс Значение
.text-break-normal overflow-wrap: normal;
word-break: normal;
.text-break-word overflow-wrap: break-word;
.text-break-all word-break: break-all;

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

  • Контрольная точка (необязательный параметр):
    Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
    Если не указана, модификатор применяется для всех размеров.

  • Модификатор (обязательный параметр):

    • text-break-normal – перенос строк происходит по обычным правилам переноса.
    • text-break-word – слова могут быть разбиты в произвольных точках, если они не помещаются полностью.
    • text-break-all – слова переносятся, чтобы поместиться в заданную ширину блока.

Примеры использованияlink

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

Модификатор text-break-normal отображает текст, как обычно, не перенося слова внутри себя, кроме обычных правил переноса (например, пробелов):

<p class="text-break-normal ...">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Перенос в словахlink

Модификатор text-break-word позволяет переносить слишком длинные слова, разрывая их на части:

<p class="text-break-word ...">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Общий переносlink

Модификатор text-break-all делает перенос слов в любом месте, чтобы текст полностью заполнял по ширине родительский элемент:

<p class="text-break-all ...">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>