Пробел

​

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

​

Нормальный

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

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

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

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

​

Без переноса

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

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

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

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

​

Пре

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

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

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

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

​

Пре линия

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

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

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

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

​

Пре перенос

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

<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.