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
Truncate Props API
- children
stringRequired RequiredThe expected text to which the ellipsis would be applied.
- lines
stringRequired |numberRequired RequiredDefault1The number of lines the text to be truncated to.
- ellipsis
stringRequired |numberRequired |nodeRequired RequiredDefault'...'Text content for the ellipsis - will appear after the truncated lines.
- whiteSpace
boolRequiredDefaultfalseAdds the whitespace from before the ellipsis.
- elementType
stringRequiredDefault'div'Custom html element for truncated text.
- className
stringRequiredSpecifies class name to append to the base element.
- onTruncate
funcRequiredCallback fired when a text truncating