@snack-uikit/truncate-string NPM

Truncate String

npm i @snack-uikit/truncate-string

<TruncateString
  variant='end'
  placement='top'
  hideTooltip={true}
  text={'Текст'}
  maxLines={2}
/>

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"`	-	Положение тултипа относительно обрезанного текста.

Если компонент работает некорректно, проверь:

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

10 days ago

10 days ago

25 days ago

26 days ago

1 month ago