Typography

Word Break

Utilities for sets the word breaks 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
break-normal	word-break: normal; overflow-wrap: normal
break-words	overflow-wrap: break-word;
break-all	word-break: break-all;
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap

Usage

Set text paragraph break line normally.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem teneturuiaiureeumnatusenimmaximelaudantiumquibusdamillonihil, reprehenderit saepe quam aliquid odio accusamus.

<div class="break-normal">
...
</div>

HTML

.dummy {
  @extend
    .break-normal;
}

SCSS

Set text paragraph break only words.

<div class="break-words">
...
</div>

HTML

.dummy {
  @extend
    .break-words;
}

SCSS

Set text paragraph break all lines and words.

<div class="break-all">
...
</div>

HTML

.dummy {
  @extend
    .break-all;
}

SCSS

Set text paragraph truncate into a single line.

<div class="truncate">
...
</div>

HTML

.dummy {
  @extend
    .truncate;
}

SCSS