@snack-uikit/truncate-string

Truncate String

Installation

npm i @snack-uikit/truncate-string

Changelog

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