White Space

Utilities for controlling white space in text.

Class Name	CSS Equivalent
.white-space-normal	white-space: normal;
.white-space-nowrap	white-space: nowrap;
.white-space-pre	white-space: pre;
.white-space-pre-wrap	white-space: pre-wrap;
.white-space-pre-line	white-space: pre-line;
.white-space-break-spaces	white-space: break-spaces;

White Space Classes

The .{white-space} classes set the white-space property to control how white space is handled in text.

• Use whitespace-normal to cause text to wrap normally within an element. Newlines and spaces will be collapsed.
• Use whitespace-nowrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed.
• Use whitespace-pre to preserve newlines and spaces within an element. Text will not be wrapped.
• Use whitespace-pre-line to preserve newlines but not spaces within an element. Text will be wrapped normally.
• Use whitespace-pre-wrap to preserve newlines and spaces within an element. Text will be wrapped normally.
• Use whitespace-break-spaces to preserve newlines and spaces within an element. White space at the end of lines will not hang, but will wrap to the next line.

.white-space-normal

.white-space-nowrap

.white-space-pre

.white-space-pre-wrap

.white-space-pre-line

.white-space-break-spaces

CEO

Alice Johnson

alice.johnson@company.com

About

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

<p class="[...] white-space-normal">This text has normal white space.</p>
<p class="[...] white-space-nowrap">This text has no white space wrapping.</p>
<p class="[...] white-space-pre">This text preserves whitespace, including line breaks.</p>
<p class="[...] white-space-pre-wrap">This text preserves whitespace but wraps lines.</p>
<p class="[...] white-space-pre-line">This text preserves whitespace and honors line breaks.</p>
<p class="[...] white-space-break-spaces">This text breaks spaces, preserving other white space.</p>