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