Truncate

Truncate - компонент для усечения длинного текста с автоматическим добавлением многоточия. Идеально подходит для ограничения отображения текста в списках, карточках и других UI элементах с ограниченным пространством.

Базовый пример усечения текста с ограничением в 3 строки.

Варианты усечения

Truncate поддерживает три варианта усечения текста: default, show-more и middle.

Default

Стандартный вариант усечения с многоточием в конце.

Одна строка

Несколько строк

Show More

Вариант с кнопками "Показать больше" и "Показать меньше" для раскрытия полного текста.

Кастомные кнопки

Вы можете использовать любые React элементы в качестве кнопок.

Middle

Усечение в середине текста. Полезно для длинных путей к файлам, URL-адресов, где важно видеть начало и конец.

Путь к файлу

URL адрес

С тултипом

Показывайте полный текст в тултипе при наведении.

Кастомный контент тултипа

Вы можете настроить содержимое тултипа.

Дополнительные опции

Обрезка пробелов

Используйте trimWhitespace для автоматической очистки лишних пробелов.

Свойства

Truncate Props

Атрибут	Тип	Описание	По умолчанию
variant	`'default' \| 'show-more' \| 'middle'`	Вариант усечения текста	`'default'`
children	`ReactNode`	Текст для усечения (обязательное)	-
className	`string`	Дополнительные CSS классы	-
showTooltip	`boolean`	Показывать тултип с полным текстом при наведении	`false`
tooltipContent	`ReactNode`	Кастомное содержимое тултипа	-
tooltipProps	`TooltipProps`	Дополнительные пропсы для компонента Tooltip	-

Default Variant Props

Специфичные свойства для варианта default:

Атрибут	Тип	Описание	По умолчанию
lines	`number`	Количество строк перед усечением	`1`
ellipsis	`string`	Символ многоточия	`'...'`
trimWhitespace	`boolean`	Обрезать лишние пробелы	`false`
separator	`string`	Разделитель для поиска позиции усечения	`' '`

Show More Variant Props

Специфичные свойства для варианта show-more:

Атрибут	Тип	Описание	По умолчанию
lines	`number`	Количество строк перед усечением	`3`
more	`ReactNode`	Кнопка "Показать больше"	`'Show more'`
less	`ReactNode`	Кнопка "Показать меньше"	`'Show less'`
ellipsis	`string`	Символ многоточия	`'...'`
trimWhitespace	`boolean`	Обрезать лишние пробелы	`false`
separator	`string`	Разделитель для поиска позиции усечения	`' '`
expanded	`boolean`	Контролируемое состояние развернутости	-
defaultExpanded	`boolean`	Начальное состояние развернутости	`false`
onToggle	`(expanded: boolean) => void`	Коллбэк при изменении состояния	-

Middle Variant Props

Специфичные свойства для варианта middle:

Атрибут	Тип	Описание	По умолчанию
end	`number`	Количество символов в конце текста	`10`
ellipsis	`string`	Символ многоточия	`'...'`
separator	`string`	Разделитель для поиска позиции усечения	`' '`

Полный текст всегда доступен через тултип (если включен showTooltip)
Кнопки "Show more/less" доступны с клавиатуры
Семантическая структура HTML сохраняется

Основано на

Truncate использует библиотеку @re-dev/react-truncate для реализации функциональности усечения текста.

Truncate

Import

Usage