Skip to main content

Truncate

Truncation makes long text fit within a given space. The Truncate text component is most commonly used to prevent line breaks on text that would otherwise affect the sizing or layout of other components. Truncated text is always represented by an ellipsis (…) and can optionally (recommended) reveal the full content on mouse over within a tooltip. The ellipsis character position within the truncated text can either be at the end, or at the middle.

This component should always be used within a wrapper that has defined dimensions, as it uses it for reference on when to automatically add the ellipsis.

Example​

Live Editor
Result
Loading...

Accessibility​

All elements trucated will be rendered with an accessible version for assistive technologies, with the complete content but invisible to browsers. And the version visible to browsers will be invisible for assistive technologies (such as screen readers).

Usage Rules​

Do:​

  • Use to make sure the text fits within its parent and doesn’t create an undesired layout flow.
  • Use when there is a list of items with long text and repetitive content across all items.
  • Use to ensure responsive layout flow for paginations, breadcrumbs, or action menus.
  • Use to prevent (layout breaking) text overflow of long strings like URLs, or user-inputted names and ID’s.

Don’t:​

  • Hide anything essential, make sure that the hidden text doesn’t prevent the user from continuing their main work flow.
  • Use truncated text within call-to-action elements (eg. Buttons), labels, or error messages.
  • Use truncated text in areas where text could gracefully expand by line breaks or hyphenation (eg. table column header, or modal headlines).
  • Overuse truncated text just because it looks nicer.

When and how to use within specific component​

  • Action Menu: middle of line truncation on items
  • Badge: end of line truncation if badge content exceeds 100% available width
  • Banner: always line break, never truncate
  • Breadcrumbs: middle of line truncation on items
  • Button: never truncate
  • Segmented Button: never truncate
  • Snackbar: never truncate
  • Tile: end of line truncate the title only
  • Panel: end of line truncate the title only
  • Modal: always line break, never truncate

Variants​

At the Middle​

The position of ellipsis is end as defaut. If you need to change to middle, you can use the prop at='middle'.

Live Editor
Result
Loading...
note

Middle truncate doesn't support the responsive if resizing window.

Custom Tooltip​

Live Editor
Result
Loading...
tip

If you use the property tooltipOptions, then the property tooltip will be superseded by it. So you don't need to use both.

Default Tooltip​

The default tooltip features are rendering it at the top, with the same content of the truncated text with no delay.

Live Editor
Result
Loading...

Props​

NameTypeDefault
at
Where the ellipsis should happen
"end" | "middle"
"end"
children
The content of the string that should be truncated
string & ReactNode
—
tooltip
boolean
false
tooltipOptions
Options available for the Tooltip
{ content?: string; position?: Position; delay?: boolean | undefined; zIndex?: number | undefined; } | undefined
—
css
Add custom styles to this component. Use with caution. Learn more here: Link
SupportedStyleAttributes
—
inputFieldCss
SupportedStyleAttributes
—
data-{foo}
Data attributes can be used by testing libraries to retrieve components or assert their existence
string
—
* - the prop is required.