Text Overflow

Utilities for controlling text overflow in an element.

React propsCSS Properties
textOverflow={value}text-overflow: {value};

Overflow Ellipsis

Use textOverflow="ellipsis" to truncate overflowing text with an ellipsis () if needed.

<x.p textOverflow="ellipsis" overflow="hidden"> ... </x.p>

Overflow Clip

Use textOverflow="clip" to truncate the text at the limit of the content area.

<x.p textOverflow="clip" overflow="hidden"> ... </x.p>


To control the text overflow of an element at a specific breakpoint, use responsive object notation. For example, adding the property textOverflow={{ md: "clip" }} to an element would apply the textOverflow="clip" utility at medium screen sizes and above.

<x.div textOverflow={{ md: 'clip' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub