1. Типография
  2. word-break

Типография

word-break

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

ClassStyles
break-normal
word-break: normal;
break-all
word-break: break-all;
break-keep
word-break: keep-all;

Примеры

Обычный

Используйте утилиту 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">The longest word in any of the major...</p>

Разрыв всех

Используйте утилиту 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">The longest word in any of the major...</p>

Сохранение разрыва

Используйте утилиту break-keep для предотвращения применения переносов строк к китайскому/японскому/корейскому (CJK) тексту:

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

<p class="break-keep">抗衡不屈不挠...</p>

Для не-CJK текста утилита break-keep имеет то же поведение, что и утилита break-normal.

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

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

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

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

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков