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

Класс
Свойства
whitespace-normalwhite-space: normal;
whitespace-nowrapwhite-space: nowrap;
whitespace-prewhite-space: pre;
whitespace-pre-linewhite-space: pre-line;
whitespace-pre-wrapwhite-space: pre-wrap;

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

Нормальный

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

Всем привет! Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин. Ты никогда не узнаеешь.
<div class="w-3/4 ...">
  <div class="whitespace-normal ...">Всем привет!

Почти 2022 год,       а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин..

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

Без переноса

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

Всем привет! Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин. Ты никогда не узнаеешь.
<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-nowrap ...">Всем привет!

Почти 2022 год,       а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин..

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

Пре

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

Всем привет!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Ты никогда не узнаеешь.
<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-pre ...">Всем привет!

Почти 2022 год,       а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин..

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

Пре линия

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

Всем привет!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Ты никогда не узнаеешь.
<div class="w-3/4 ...">
  <div class="whitespace-pre-line ...">Всем привет!

Почти 2022 год,       а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин..

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

Пре перенос

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

Всем привет!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Ты никогда не узнаеешь.
<div class="w-3/4 ...">
  <div class="whitespace-pre-wrap ...">Всем привет!

Почти 2022 год,       а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин..

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

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

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:whitespace-pre to only apply the whitespace-pre utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

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

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:whitespace-pre to apply the whitespace-pre utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.