TruncatedText

Displays text that is truncated if it is longer than the maximum number of characters. Optionally displays the full content within a tooltip when the user hovers over the text.


children
fullWidth
showTooltip
element
tooltipProps

Props

NameTypeDefaultDescription

children

react node

The content to be truncated.

indicator

string

...

The text to display after content that iis truncated

maxCharacters

number

20

fullWidth

boolean

false

When set to true, the component will truncate based on available space instead of a maximum number of characters.

showTooltip

boolean

true

Whether to show a tooltip with full content or not.

element

react node

<Text />

The element to use to wrap the truncated text. Props can be passed to this element as usual.

tooltipProps

object

Additional options for to be passed to the tooltip