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