TextEllipsis

OverviewProperties

TextEllipsis

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