TextEllipsis

Use the TextEllipsis component to truncate text and show an ellipsis whenever there is insufficient space to render the entire text. While some of our Strato components provide ellipsis out of the box, you need to take care of this yourself when writing your own components.

OverviewProperties

Import

import { TextEllipsis } from '@dynatrace/strato-components/typography';

Demo

CodeSandbox

Variants

Depending on the value set for the truncationMode prop, the TextEllipsis component can truncate text at the start, middle, or end. It is important to note that start and end truncation rely on the CSS text-overflow ellipsis, making them more performant than the middle ellipsis.

CodeSandbox

Show tooltip on text overflow

To let users access the full text when it gets truncated, wrap TextEllipsis inside a Tooltip and use the onTextOverflow callback to enable the tooltip only when the text is actually overflowing.

CodeSandbox