Typography

Whitespace

Utilities for sets the whitespace of an element.


Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
whitespace-normalwhite-space: normal
whitespace-no-wrapwhite-space: nowrap
whitespace-prewhite-space: pre
whitespace-pre-linewhite-space: pre-line
whitespace-pre-wrapwhite-space: pre-wrap

Usage

Set text paragraph whitespace to normal.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe quam aliquid odio accusamus.
<div class="whitespace-normal ...">
...
</div>
HTML
.dummy {
@extend
.whitespace-normal;
}
SCSS

Set scrollable text paragraph whitespace to no-wrap.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe quam aliquid odio accusamus.
<div class="whitespace-no-wrap ... overflow-x-scroll">
...
</div>
HTML

Set text paragraph preserved new line whitespaces.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Omnis quidem itaque beatae,
  rem tenetur quia iure,

reprehenderit saepe quam aliquid odio accusamus.
<div class="whitespace-pre ...">
...
</div>
HTML

Set text paragraph without preserved new line whitespaces.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
reprehenderit saepe quam aliquid odio accusamus.
<div class="whitespace-pre-line ...">
...
</div>
HTML