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",
);