Типография
Утилиты для управления тем, как текст элемента переполняется.
| Class | Styles |
|---|---|
truncate | overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; |
text-ellipsis | text-overflow: ellipsis; |
text-clip | text-overflow: clip; |
Используйте утилиту truncate для предотвращения переноса текста и обрезки переполняющегося текста с многоточием (…) при необходимости:
Самое длинное слово в любом из основных словарей английского языка - это пневмоультрамикроскопикосиковулканокониоз, слово, которое относится к заболеванию легких, полученному от вдыхания очень мелких частиц кремнезема, особенно из вулкана; с медицинской точки зрения это то же самое, что и силикоз.
<p class="truncate">Самое длинное слово в любом из основных...</p>Используйте утилиту text-ellipsis для обрезки переполняющегося текста с многоточием (…) при необходимости:
Самое длинное слово в любом из основных словарей английского языка - это пневмоультрамикроскопикосиковулканокониоз, слово, которое относится к заболеванию легких, полученному от вдыхания очень мелких частиц кремнезема, особенно из вулкана; с медицинской точки зрения это то же самое, что и силикоз.
<p class="overflow-hidden text-ellipsis">Самое длинное слово в любом из основных...</p>Используйте утилиту text-clip для обрезки текста на границе области содержимого:
Самое длинное слово в любом из основных словарей английского языка - это пневмоультрамикроскопикосиковулканокониоз, слово, которое относится к заболеванию легких, полученному от вдыхания очень мелких частиц кремнезема, особенно из вулкана; с медицинской точки зрения это то же самое, что и силикоз.
<p class="overflow-hidden text-clip">Самое длинное слово в любом из основных...</p>Это поведение браузера по умолчанию.
Префикс a text-overflow утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<p class="text-ellipsis md:text-clip ..."> Lorem ipsum dolor sit amet...</p>Подробнее об использовании вариантов читайте в документации по вариантам.