Домашняя страница Tailwind CSS
  1. Типография
  2. Перенос текста

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

Класс
Свойства
text-wraptext-wrap: wrap;
text-nowraptext-wrap: nowrap;
text-balancetext-wrap: balance;
text-prettytext-wrap: pretty;

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

Wrap

Используйте text-wrap, чтобы перенести переполненный текст на несколько строк в логических точках текста.

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.

<article class="text-wrap ...">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

No Wrap

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

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.

<article class="text-nowrap ...">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

Balance

Используйте text-balance, чтобы равномерно распределить текст по каждой строке.

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.

<article>
  <h3 class="text-balance ...">Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

Из соображений производительности браузеры ограничивают балансировку текста блоками длиной ~6 строк или меньше, что делает его лучше всего подходящим для заголовков.

Pretty

Используйте text-pretty, чтобы предотвратить появление висячих строк (одного слова в отдельной строке) в конце текстового блока.

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.

<article class="text-pretty ...">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

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

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

<h1 class="text-wrap hover:text-balance">
  <!-- ... -->
</h1>

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

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

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

<h1 class="text-wrap md:text-balance">
  <!-- ... -->
</h1>

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