---
description: Компонент ограничивает текстовый контент, скрывая его за многоточием.
---

<Overview group="typography">

# EllipsisText [tag:component]

Компонент предназначен для ограничения текстового содержимого до определенного количества строк
с добавлением многоточия в конце, если текст превышает заданное ограничение.

</Overview>

{/* @example-description: Ограничение длинного текста с отображением многоточия при переполнении. */}
<Playground>
  ```jsx
  <EllipsisText maxWidth={200}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua.
  </EllipsisText>
  ```
</Playground>

## Типографика

Необязательно оборачивать типографические компоненты (например, [`Text`](/components/typography#text) или [`Paragraph`](/components/typography#paragraph))
в компонент `EllipsisText` для ограничения количества видимого контента. Достаточно передать типографический компонент в
свойство `Component`:

{/* @example-description: Использование `EllipsisText` с типографическим компонентом через свойство `Component`. */}
<Playground>
  ```jsx
  <EllipsisText Component={Footnote} maxWidth={100}>
    Мелкий текст скрыт за многоточием
  </EllipsisText>
  ```
</Playground>

## Известные ограничения [#limitations]

Для работоспособности компонента необходимо, чтобы у ближайшего родителя была ограничена ширина.
Если это не так, то необходимо ограничить ширину вручную.

Рассмотрим на примере [`HorizontalCell`](/components/horizontal-cell), который при `size="auto"` перестаёт ограничивать ширину.
В качестве ограничивающей ширины будем брать ширину изображения:

{/* @example-description: Ограничение текста в `HorizontalCell` с явным `maxWidth` для корректного ellipsis. */}
<Playground>
  ```jsx
  <HorizontalCell
    size="auto"
    title={
      <EllipsisText maxWidth={100} maxLines={2}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
      </EllipsisText>
    }
  >
    <Image
      size={100}
      borderRadius="l"
      src="https://sun9-24.userapi.com/c639120/v639120173/3fe6f/tgPr7lecAY4.jpg"
    />
  </HorizontalCell>
  ```
</Playground>

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `span` |  |
| `disableNativeTitle` | `boolean` | `false` | Отключает отображение нативного тултипа с полным текстом. |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `maxLines` | `number` | `1` | Максимальное количество видимых строк.  > При `maxLines > 1` используется свойство line-clamp, которое поддерживается не всеми версиями браузеров. Используйте с осторожностью > |
| `maxWidth` | `number` | `-` | Пользовательская маскимальная ширина.  Используйте в случаях, когда у контейнера ширина зависит от размера контента, другими словами, когда ширина не ограничена. |