Whitespace

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

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.