# @snack-uikit/truncate-string

> `npm i @snack-uikit/truncate-string`

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/truncate-string
pnpm add @snack-uikit/truncate-string
yarn add @snack-uikit/truncate-string
bun add @snack-uikit/truncate-string
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 78 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Anna Kozlova |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/truncate-string
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/truncate-string
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/truncate-string

## Dependencies (4)

- [lodash](https://npm.io/package/lodash.md) ^4.18.1
- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0
- [@snack-uikit/tooltip](https://npm.io/package/@snack-uikit/tooltip.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 1.0.1-preview-acb79d0b.0 (preview) — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.7.16-preview-fc6b5b87.0 — 2026-08-20
- 0.7.15 — 2026-08-07
- 0.7.15-preview-4e8bfebd.0 — 2026-08-07
- 0.7.15-preview-eff3bc02.0 — 2026-08-03
- 0.7.14 — 2026-07-03
- 0.7.14-preview-74429015.0 — 2026-07-03
- 0.7.14-preview-02d918ac.0 — 2026-07-03
- 0.7.14-preview-6a625dbd.0 — 2026-06-30
- 0.7.14-preview-9f7f3a20.0 — 2026-06-30
- 0.7.13 — 2026-06-24
- … 177 more at https://npm.io/package/@snack-uikit/truncate-string/versions

## README

# Truncate String

## Installation
`npm i @snack-uikit/truncate-string`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/truncate-string` предоставляет компонент `TruncateString` для обрезания длинных текстовых строк с автоматическим отображением тултипа с полным текстом при необходимости.
- Компонент поддерживает два варианта обрезания: `end` (с конца строки, по умолчанию) и `middle` (по середине), что позволяет гибко адаптировать отображение текста под разные сценарии интерфейса.
- `TruncateString` автоматически определяет, был ли текст обрезан, и показывает тултип с полным содержимым только когда это необходимо, что улучшает пользовательский опыт при работе с длинными строками.
- Компонент поддерживает многострочное обрезание через проп `maxLines`, позволяя ограничивать текст несколькими строками с многоточием в конце.
- Позиция тултипа, условие его отображения (hover, click, focus и их комбинации) и возможность скрыть тултип полностью настраиваются через соответствующие пропы.
- Компонент реагирует на изменение размера контейнера через `ResizeObserver`, автоматически пересчитывая необходимость обрезания при изменении доступного пространства.

## Example

```tsx
import { TruncateString } from '@snack-uikit/truncate-string';

function Example() {
  return (
    <div style={{ width: '200px' }}>
      <TruncateString
        variant="end"
        placement="top"
        hideTooltip={false}
        text="Очень длинный текст, который будет обрезан с конца строки"
        maxLines={2}
        trigger="hover"
      />
    </div>
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## TruncateString
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| text* | `string` | - | Текст, который будет обрезаться |
| variant | "middle" \| "end" | end | Вариант обрезания строки: <br> - `End` - с конца <br> - `Middle` - по середине |
| className | `string` | - | CSS-класс |
| tooltipClassName | `string` | - | Стиль для тултипа |
| hideTooltip | `boolean` | - | Скрывать ли тултип с полным текстом |
| maxLines | `number` | - | Максимальное кол-во строк, до которого может сворачиваться текст. |
| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Положение тултипа относительно обрезанного текста. |
| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - | Условие отображения тултипа |


[//]: DOCUMENTATION_SECTION_END

## Troubleshooting

Если компонент работает некорректно, проверь:
* `<TruncateString />` должен лежать в органиченном по ширине контейнере,
  иначе он не сможет правильно высчитывать обрезание.
* если с ограничением по ширине тоже возникают проблемы, можно попробовать 
  задать на компоненте-обёртке св-во display: grid

---
_Source: https://npm.io/package/@snack-uikit/truncate-string · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._