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.

<> <template preview> <x.p textOverflow="ellipsis" overflow="hidden" maxWidth="xs" px={6} py={4} mx="auto" bg="emerald-200" color="emerald-700" fontWeight="medium" borderRadius="lg" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum. </x.p> </template> <x.p textOverflow="ellipsis" overflow="hidden"> ... </x.p> </>

Overflow Clip

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

<> <template preview> <x.p textOverflow="clip" overflow="hidden" maxWidth="xs" px={6} py={4} mx="auto" bg="light-blue-200" color="light-blue-700" fontWeight="medium" borderRadius="lg" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum. </x.p> </template> <x.p textOverflow="clip" overflow="hidden"> ... </x.p> </>

Responsive

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