Типография
Утилиты для управления тем, как текст переносится внутри элемента.
| Class | Styles |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
Используйте утилиту text-wrap для переноса переполняющегося текста на несколько строк в логических точках текста:
Жители Нью-Йорка встречают зимний холод с меньшим теплом в этом году, поскольку самый почитаемый суповой киоск города неожиданно закрывается, следуя серии событий, которые оставили сообщество в недоумении.
<article class="text-wrap"> <h3>Любимый суповой киоск Манхэттена закрывается</h3> <p>Жители Нью-Йорка встречают зимний холод...</p></article>Используйте утилиту text-nowrap для предотвращения переноса текста, позволяя ему переполняться при необходимости:
Жители Нью-Йорка встречают зимний холод с меньшим теплом в этом году, поскольку самый почитаемый суповой киоск города неожиданно закрывается, следуя серии событий, которые оставили сообщество в недоумении.
<article class="text-nowrap"> <h3>Любимый суповой киоск Манхэттена закрывается</h3> <p>Жители Нью-Йорка встречают зимний холод...</p></article>Используйте утилиту text-balance для равномерного распределения текста по каждой строке:
Жители Нью-Йорка встречают зимний холод с меньшим теплом в этом году, поскольку самый почитаемый суповой киоск города неожиданно закрывается, следуя серии событий, которые оставили сообщество в недоумении.
<article> <h3 class="text-balance">Любимый суповой киоск Манхэттена закрывается</h3> <p>Жители Нью-Йорка встречают зимний холод...</p></article>По соображениям производительности браузеры ограничивают балансировку текста блоками, которые составляют ~6 строк или меньше, что делает его наиболее подходящим для заголовков.
Используйте утилиту text-pretty для предотвращения "сирот" (одного слова на отдельной строке) в конце текстового блока:
Жители Нью-Йорка встречают зимний холод с меньшим теплом в этом году, поскольку самый почитаемый суповой киоск города неожиданно закрывается, следуя серии событий, которые оставили сообщество в недоумении.
<article> <h3 class="text-pretty">Любимый суповой киоск Манхэттена закрывается</h3> <p>Жители Нью-Йорка встречают зимний холод...</p></article>Префикс a text-wrap утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>Подробнее об использовании вариантов читайте в документации по вариантам.