@snack-uikit/truncate-string
v0.4.14
Published
## Installation `npm i @snack-uikit/truncate-string`
Downloads
1,387
Readme
Truncate String
Installation
npm i @snack-uikit/truncate-string
Example
<TruncateString
variant='end'
placement='top'
hideTooltip={true}
text={'Текст'}
maxLines={2}
/>
TruncateString
Props
| name | type | default value | description |
|------|------|---------------|-------------|
| text* | string
| - | Текст, который будет обрезаться |
| variant | "middle" | "end" | end | Вариант обрезания строки: - End
- с конца - Middle
- по середине |
| className | string
| - | CSS-класс |
| 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"
| - | Положение тултипа относительно обрезанного текста. |
Troubleshooting
Если компонент работает некорректно, проверь:
<TruncateString />
должен лежать в органиченном по ширине контейнере, иначе он не сможет правильно высчитывать обрезание.- если с ограничением по ширине тоже возникают проблемы, можно попробовать задать на компоненте-обёртке св-во display: grid