Whitespace
Utilities for controlling an element's white-space property
Class reference
Normal
Use .whitespace-normal
to cause text to wrap normally within an element. Newlines and spaces will be collapsed.
No Wrap
Use .whitespace-nowrap
to prevent text from wrapping within an element. Newlines and spaces will be collapsed.
Pre
Use .whitespace-pre
to preserve newlines and spaces within an element. Text will not be wrapped.
Pre Line
Use .whitespace-pre-line
to preserve newlines but not spaces within an element. Text will be wrapped normally.
Pre Wrap
Use .whitespace-pre-wrap
to preserve newlines and spaces within an element. Text will be wrapped normally.
Responsive
To control the whitespace property of an element only at a specific breakpoint, add a {screen}:
prefix to any existing whitespace utility. For example, adding the class md:whitespace-pre
to an element would apply the whitespace-pre
utility at medium screen sizes and above.
<div class="whitespace-normal **md:whitespace-pre** ...">
<!-- ... -->
</div>
For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5