Пробел

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

​Нормальный

Используйте whitespace-normal для нормального переноса текста внутри элемента. Новые строки и пробелы будут свернуты.

<div class="w-3/4 ...">
  <div class="whitespace-normal ...">Всем привет!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

Ты никогда не узнаешь.</div>
</div>

​Без переноса

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

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-nowrap ...">Всем привет!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

Ты никогда не узнаешь.</div>
</div>

​Пре

Используйте whitespace-pre, чтобы сохранить символы новой строки и пробелы внутри элемента. Текст не переносится.

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-pre ...">Всем привет!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

Ты никогда не узнаешь.</div>
</div>

​Пре линия

Используйте whitespace-pre-line, чтобы сохранить символы новой строки, но не пробелы внутри элемента. Текст будет перенесен в обычном режиме.

<div class="w-3/4 ...">
  <div class="whitespace-pre-line ...">Всем привет!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

Ты никогда не узнаешь.</div>
</div>

​Пре перенос

Используйте whitespace-pre-wrap, чтобы сохранить символы новой строки и пробелы внутри элемента. Текст будет перенесен в обычном режиме.

<div class="w-3/4 ...">
  <div class="whitespace-pre-wrap ...">Всем привет!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

​Разрыв пробелов

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

<div class="w-3/4 ...">
  <div class="whitespace-break-spaces ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

Ты никогда не узнаешь.</div>
</div>

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

​Наведение, фокус и другие состояния

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

<div class="whitespace-normal hover:whitespace-pre">
  <!-- ... -->
</div>

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

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

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

<div class="whitespace-normal md:whitespace-pre">
  <!-- ... -->
</div>

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