Skip to main content

Text Overflow

Atomic PropsCSS Properties
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
overflowEllipsistext-overflow: ellipsis;
overflowCliptext-overflow: clip;

Truncate​

Use truncate atomic props to truncate overflowing text with an ellipsis (…) if needed.

Result
Loading...
Live Editor

Overflow Ellipsis​

Use overflowEllipsis to truncate overflowing text with an ellipsis (…) if needed.

Result
Loading...
Live Editor

Overflow Clip​

Use overflowClip to truncate the text at the limit of the content area.

Result
Loading...
Live Editor