Обрезка текста
Классы задают, как показать конец текста, который не помещается в блок:
многоточием или обрезкой по краю. Берите truncate для названий, адресов и
имён файлов в одну строку.
Пример
truncate делает всё сразу. t-ellipsis и t-clip действуют только вместе
с overflow-hidden и запретом переноса wrap-none.
Классы
| Класс | CSS | Значения |
|---|---|---|
t-ellipsis |
text-overflow: ellipsis |
— |
t-clip |
text-overflow: clip |
— |
truncate |
overflow: hidden; white-space: nowrap; text-overflow: ellipsis |
— |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
truncate — запрет переноса, скрытие лишнего и многоточие в одном классе:
<p class="truncate">Очень длинное название файла отчёта.xlsx</p>
t-ellipsis и t-clip задают только text-overflow. Берите их, когда
переполнение и перенос уже заданы другими классами или стилями компонента.
Во флекс-контейнере элемент по умолчанию не сжимается меньше своего
содержимого, и обрезка не наступает. Задайте ему min-w-0:
<div class="flex gap-2">
<span class="sf-icon" aria-hidden="true">description</span>
<span class="truncate min-w-0">Очень длинное название файла отчёта.xlsx</span>
</div>
Ограничения
- Многоточие ставится только в конце одной строки. Для нескольких строк
берите
line-clamp-*. - Скрытый текст не виден, но остаётся в разметке. Если полное значение нужно читателю, покажите его в подсказке или на отдельной странице.
- У семейства нет префиксов ширины экрана и состояний.