Skip to main content

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.

Import

import { TextEllipsis } from '@dynatrace/strato-components-preview/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

Props

TextEllipsisProps

extends<>, , ,
NameTypeDefaultDescription
children
-The children (as text) passed to the component.
truncationMode?
'end'The mode used for for truncating the text, either at the start, in the middle or at the end.
onTextOverflow?
(ellipsized: ) =>
-Gets called when text needs to get truncated due to lack of horizontal space.
Still have questions?
Find answers in the Dynatrace Community