White space

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

In this article

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

Questions or feedback about this article? Let us know