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.

<> <template preview> <x.div w={3 / 4} px={6} py={4} bg="indigo-200" borderRadius="lg"> <x.div whiteSpace="normal" fontFamily="Flow" color="indigo-500" fontSize="3xl" lineHeight={5} > {`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> </template> <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.

<> <template preview> <x.div w={3 / 4} px={6} py={4} bg="emerald-200" borderRadius="lg" overflowX="auto" > <x.div whiteSpace="nowrap" fontFamily="Flow" color="emerald-500" fontSize="3xl" lineHeight={5} > {`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> </template> <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.

<> <template preview> <x.div w={3 / 4} px={6} py={4} bg="amber-200" borderRadius="lg" overflowX="auto" > <x.div whiteSpace="pre" fontFamily="Flow" color="amber-500" fontSize="3xl" lineHeight={5} > {`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> </template> <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.

<> <template preview> <x.div w={3 / 4} px={6} py={4} bg="light-blue-200" borderRadius="lg" overflowX="auto" > <x.div whiteSpace="pre-line" fontFamily="Flow" color="light-blue-500" fontSize="3xl" lineHeight={5} > {`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> </template> <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.

<> <template preview> <x.div w={3 / 4} px={6} py={4} bg="red-200" borderRadius="lg" overflowX="auto" > <x.div whiteSpace="pre-wrap" fontFamily="Flow" color="red-500" fontSize="3xl" lineHeight={5} > {`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> </template> <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