1. Типография
  2. white-space

Типография

white-space

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

ClassStyles
whitespace-normal
white-space: normal;
whitespace-nowrap
white-space: nowrap;
whitespace-pre
white-space: pre;
whitespace-pre-line
white-space: pre-line;
whitespace-pre-wrap
white-space: pre-wrap;
whitespace-break-spaces
white-space: break-spaces;

Примеры

Обычный

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

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

<p class="whitespace-normal">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

Без переноса

Используйте утилиту whitespace-nowrap для предотвращения переноса текста в элементе. Переносы строк и пробелы будут свернуты:

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

<p class="overflow-auto whitespace-nowrap">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

Pre

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

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

<p class="overflow-auto whitespace-pre">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

Pre Line

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

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

<p class="whitespace-pre-line">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

Pre Wrap

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

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

<p class="whitespace-pre-wrap">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

Break Spaces

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

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

<p class="whitespace-break-spaces">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

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

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

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

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

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