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

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.

Import

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

Use cases

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

Display full text on hover

To allow the user to access the full text that gets truncated by TextEllipsis, the component can be wrapped inside a Tooltip component.

CodeSandbox