TextEllipsis

Use the TextEllipsis component for truncating a given piece of text with an ellipsis whenever there is not enough space available to render the entire text. While some design-system components provide ellipses 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

Variants

The TextEllipsis component can be used to shorten text at the start, middle or end depending on which truncationMode is set.

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<>, ,

Name	Type	Default	Description
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.