EllipsisText
Компонент предназначен для ограничения текстового содержимого до определенного количества строк с добавлением многоточия в конце, если текст превышает заданное ограничение.
Типографика
Необязательно оборачивать типографические компоненты (например, Text или Paragraph)
в компонент EllipsisText для ограничения количества видимого контента. Достаточно передать типографический компонент в
свойство Component:
Известные ограничения
Для работоспособности компонента необходимо, чтобы у ближайшего родителя была ограничена ширина. Если это не так, то необходимо ограничить ширину вручную.
Рассмотрим на примере HorizontalCell, который при size="auto" перестаёт ограничивать ширину.
В качестве ограничивающей ширины будем брать ширину изображения:
Свойства и методы
| Свойство | Описание |
|---|---|
baseClassName | string | falseDeprecated: Since 7.3.0. Свойство устарело и будет удалено в По умолчанию: - |
baseStyle | CSSPropertiesDeprecated: Since 7.3.0. Свойство устарело и будет удалено в По умолчанию: - |
Component | ElementType<any, keyof IntrinsicElements>По умолчанию: span |
disableNativeTitle | booleanОтключает отображение нативного тултипа с полным текстом. По умолчанию: false |
getRootRef | Ref<HTMLElement>По умолчанию: - |
maxLines | numberМаксимальное количество видимых строк. По умолчанию: 1 |
maxWidth | numberПользовательская маскимальная ширина. Используйте в случаях, когда у контейнера ширина зависит от размера контента, другими словами, когда ширина не ограничена. По умолчанию: - |