Truncated Text

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.

import { TruncatedText } from "@nulogy/components";

<TruncatedText>Special instructions are provided for the shipment</TruncatedText>

Props

NameTypeDefaultDescription

children

string

Required

The content to be truncated

element

node

<Text />

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

indicator

string

...

The text to display after content that is truncated

maxCharacters

number

20

The number of characters to display

showTooltip

boolean

true

Displays a tooltip with the full content

tooltipProps

object

Additional options for to be passed to the tooltip

Tooltip Props

Props from the Tooltip component can also be passed throught the tooltipProps object.

Related components