KEllipsis
It can omit your text to a certain extent.
Install
bash
pnpm add @ikun-ui/ellipsis
bash
yarn add @ikun-ui/ellipsis
bash
npm install @ikun-ui/ellipsis
Basic usage
Basic single line ellipsis with tooltip.content
is the text you need to display in the tooltip, text
is the text you need to abbreviate.
Omit the number of characters
You can specify the number of words you need to omit through num
.
omitted position
placement
can specify the position where the ellipsis appears
Omit multiple lines
See caniuse for compatibility.
Ellipsis Props
Name | Type | Default | Description |
---|---|---|---|
content | string | '' | The text content displayed by tooltip. |
text | string | '' | Text content that needs to be omitted. |
expand | boolean | false | Abbreviated content trigger event to expand to the full text.. |
lineClamp | number | null | null | Maximum lines. |
num | number | 5 | Number of characters to omit. |
placement | 'left' | 'right' | 'center' | right | Ellipsis display position. |
cls | string | '' | Additional class for component |
attrs | Record<string, string> | {} | Additional attributes |