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

Special instructions are provided for the shipment

Special instructions are provided for the shipment

indicator

maxCharacters

fullWidth

showTooltip

element

tooltipProps

import * as React from "react";
import { TruncatedText } from "@nulogy/components";

export default () => {
  return (
    <TruncatedText>
      Special instructions are provided for the shipment
    </TruncatedText>
  );
}

import * as React from "react";
import { TruncatedText } from "@nulogy/components";

export default () => {
  return (
    <TruncatedText>
      Special instructions are provided for the shipment
    </TruncatedText>
  );
}

Props

Name	Type	Default	Description
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