Truncate
A Truncate component can help you crop multiline text. There will be three dots at the end of the text.
Basic Usage
With the custom ellipsis
With the onTruncate
Example usage in Card
HTML markdown support
Note: Truncate supports only plain HTML children and not jsx.
Truncate Props API
- children
stringRequiredThe expected text to which the ellipsis would be applied.
- lines
string|numberDefault1The number of lines the text to be truncated to.
- ellipsis
string|number|nodeDefault'...'Text content for the ellipsis - will appear after the truncated lines.
- whiteSpace
boolDefaultfalseAdds the whitespace from before the ellipsis.
- elementType
stringDefault'div'Custom html element for truncated text.
- className
stringSpecifies class name to append to the base element.
- onTruncate
funcCallback fired when a text truncating