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

class	css
whitespace-normal	white-space: normal
whitespace-no-wrap	white-space: nowrap
whitespace-pre	white-space: pre
whitespace-pre-line	white-space: pre-line
whitespace-pre-wrap	white-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.

<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