| Class | Properties |
|---|---|
.white-space-normal | white-space: normal; |
.white-space-no-wrap | white-space: nowrap; |
.white-space-pre | white-space: pre; |
.white-space-pre-line | white-space: pre-line; |
.white-space-pre-wrap | white-space: pre-wrap; |
Usage
Use .white-space-normal to cause text to wrap normally within an element. Newlines and spaces will be collapsed.
<p class="white-space-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et
dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>Use .white-space-no-wrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed.
<p class="white-space-no-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et
dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>Use .whitespace-pre to preserve newlines and spaces within an element. Text will not be wrapped.
<p class="white-space-pre">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et
dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>Use .whitespace-pre-line to preserve newlines but not spaces within an element. Text will be wrapped normally.
<p class="white-space-pre-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et
dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>Use .whitespace-pre-wrap to preserve newlines and spaces within an element. Text will be wrapped normally.
<p class="white-space-pre-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et
dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>Variants
By default, no responsive or hover-state variants are generated for white-space utilities.
Responsive
To include responsive variants like .md:white-space-pre, add "white-space" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:
$responsive-variants: (
// ...
"white-space",
);
Hover-state
To include hover-state variants like .hover:white-space-pre, add "white-space" to the $hover-variants variable:
$hover-variants: (
// ...
"white-space",
);