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.

OverviewPropertiesChangelog3.14.0

Changes to TextEllipsis. The full components changelog also lists package-wide and cross-cutting entries.

1.16.0

Updates

• The Intl.Segmenter will now be created only when needed and not on import. (APPDEV-15823)

1.8.1

• When truncationMode is set to start, punctuation characters are now rendered correctly at the start of the string. (APPDEV-14072)

1.7.0

• truncationMode="middle" now fully supports emoji characters. (APPDEV-13186)
• TruncationMode is now available as a public type. (APPDEV-12065)

1.5.0

• When truncationMode is set to start, punctuation characters are now rendered correctly at the end of the string. (APPDEV-12900)

1.1.0

• Text with ellipsis with truncationMode="middle" can grow when resizing. (APPDEV-11597)

0.85.120

• Text now displays correctly in Firefox when the parent container has max-width: max-content. (APPDEV-12006)

0.85.100

Typography

• CSS text ellipsis from a wrapping element is now correctly applied to the Link and ExternalLink component. (APPDEV-11491)

0.85.80

• Now onTextOverflow is also called when TextEllipsis is used inside another component that already handles text truncation.