Text Overflow

Utilities for controlling text overflow in an element.

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>

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.