TruncateString

Обрезает длинный текст в ограниченной по ширине области и раскрывает полный вариант в тултипе при наведении. Два варианта обрезания — с конца (end) и посередине (middle) — решают разные задачи: читаемый заголовок и распознаваемое имя файла соответственно.

Демо

<TruncateString variant="end" text="Очень длинный текст, который точно не поместится в узкий контейнер превью" maxLines={1} hideTooltip={false} />

Когда использовать

• В списках, таблицах и карточках, где ширина ячейки зафиксирована.
• Для имён файлов, идентификаторов и коммитов — чтобы сохранить начало и конец строки (middle).
• Для заголовков и описаний, длина которых непредсказуема.

Когда не нужен: если контейнер может расти по содержимому (например, body статьи) — проще обернуть текст в абзац без обрезания.

Анатомия

Variant

Где обрезается строка: end — троеточие в конце (стандартный CSS ellipsis), middle — обрезка посередине (для путей, email, ID — чтобы видеть начало и конец).

Установка

pnpm add @cloud-ru/ds-truncate-string

import { TruncateString } from '@cloud-ru/ds-truncate-string'

Примеры использования

Обрезание с конца

import { TruncateString } from '@cloud-ru/ds-truncate-string';

export function TruncateEnd() {
  return (
    <div style={{ width: 220 }}>
      <TruncateString variant='end' text='Очень длинный заголовок, который не помещается' maxLines={1} />
    </div>
  );
}

Обрезание посередине — имя файла

import { TruncateString } from '@cloud-ru/ds-truncate-string';

export function TruncateMiddle() {
  return (
    <div style={{ width: 220 }}>
      <TruncateString variant='middle' text='2024-quarterly-report-final-v3.pdf' />
    </div>
  );
}

Многострочное описание

import { TruncateString } from '@cloud-ru/ds-truncate-string';

export function TruncateMultiline() {
  return (
    <div style={{ width: 260 }}>
      <TruncateString
        variant='end'
        maxLines={3}
        text='Длинное описание, которое укладывается в три строки, а затем обрезается с троеточием в конце.'
      />
    </div>
  );
}

Props

Types

TruncateStringProps

Related props

TooltipProps

Storybook