Домашняя страница Tailwind CSS
  1. Типография
  2. Разрыв слов

Краткая справка

Класс
Свойства
break-normaloverflow-wrap: normal; word-break: normal;
break-wordsoverflow-wrap: break-word;
break-allword-break: break-all;
break-keepword-break: keep-all;

Основы использования

Normal

Используйте break-normal только для добавления разрывов строк в обычные точки разрыва слова.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<p class="break-normal ...">...</p>

Break Words

Используйте break-words для добавления разрывов строки в середине слова, если это необходимо.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<p class="break-words ...">...</p>

Break All

Используйте break-all , чтобы при необходимости добавлять разрывы строк, не пытаясь сохранить целые слова.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<p class="break-all ...">...</p>

Break Keep

Используйте break-keep, чтобы предотвратить применение разрывов строк к тексту на китайском/японском/корейском (CJK) языке. Для текста, отличного от CJK, break-keep ведет себя так же, как break-normal.

抗衡不屈不挠 (kànghéng bùqū bùnáo) 这是一个长词，意思是不畏强暴，奋勇抗争，坚定不移，永不放弃。这个词通常用来描述那些在面对困难和挑战时坚持自己信念的人， 他们克服一切困难，不屈不挠地追求自己的目标。无论遇到多大的挑战，他们都能够坚持到底，不放弃，最终获得胜利。

<p class="break-keep ...">...</p>

Применяя условно

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:break-all, чтобы применять утилиту break-all только при hover.

<p class="break-normal hover:break-all">
  <!-- ... -->
</p>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:break-all, чтобы применить утилиту break-all только на экранах среднего размера и выше.

<p class="break-normal md:break-all">
  <!-- ... -->
</p>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.