Whitespace

Utilities for controlling an element's white-space property.

React propsCSS Properties
whiteSpace={value}white-space: {value};

Normal

Use whiteSpace="normal" to cause text to wrap normally within an element. Newlines and spaces will be collapsed.

<x.div w={3 / 4}> <x.div whiteSpace="normal"> {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe quam aliquid odio accusamus.`} </x.div> </x.div>

No Wrap

Use whiteSpace="nowrap" to prevent text from wrapping within an element. Newlines and spaces will be collapsed.

<x.div w={3 / 4} overflowX="auto"> <x.div whiteSpace="nowrap"> {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe quam aliquid odio accusamus.`} </x.div> </x.div>

Pre

Use whiteSpace="pre" to preserve newlines and spaces within an element. Text will not be wrapped.

<x.div w={3 / 4} overflowX="auto"> <x.div whiteSpace="pre"> {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe quam aliquid odio accusamus.`} </x.div> </x.div>

Pre Line

Use whiteSpace="pre-line" to preserve newlines but not spaces within an element. Text will be wrapped normally.

<x.div w={3 / 4} overflowX="auto"> <x.div whiteSpace="pre-line"> {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe quam aliquid odio accusamus.`} </x.div> </x.div>

Pre Wrap

Use whiteSpace="pre-wrap" to preserve newlines and spaces within an element. Text will be wrapped normally.

<x.div w={3 / 4} overflowX="auto"> <x.div whiteSpace="pre-wrap"> {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe quam aliquid odio accusamus.`} </x.div> </x.div>

Responsive

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

<x.div whiteSpace={{ md: 'pre' }}>{/* ... */}</x.div>

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

Edit this page on GitHub