Типография
Утилиты для управления свойством white-space элемента.
| Class | Styles |
|---|---|
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>Используйте утилиту 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>Используйте утилиту 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>Используйте утилиту 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>Используйте утилиту 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>Подробнее об использовании вариантов читайте в документации по вариантам.