1. Типография
  2. text-overflow

Типография

text-overflow

Утилиты для управления тем, как текст элемента переполняется.

ClassStyles
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>

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков