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
.
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