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
string
RequiredThe expected text to which the ellipsis would be applied.
- lines
string
|number
Default1The number of lines the text to be truncated to.
- ellipsis
string
|number
|node
Default'...'Text content for the ellipsis - will appear after the truncated lines.
- whiteSpace
bool
DefaultfalseAdds the whitespace from before the ellipsis.
- elementType
string
Default'div'Custom html element for truncated text.
- className
string
Specifies class name to append to the base element.
- onTruncate
func
Callback fired when a text truncating