Sections

Typography

Layout

Backgrounds

Borders

Flex box

Spacing

Sizing

Tables

Effects

Interactivity

SVG

Accessibility

Transforms

Transitions

Word break

Utilities for controlling word breaks in an element.

Class Properties
.break-normal word-break: normal;
.break-words overflow-wrap: break-word;
.break-all word-break: all;
.truncate overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap

Use .break-normal to only add line breaks at normal word break points.

Lorem ipsum dolor sit amet, consecteturadipiscingelitplaceratnulla eleifend. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet.

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

Use .break-words to add line breaks mid-word if needed.

Lorem ipsum dolor sit amet, consecteturadipiscingelitplaceratnulla eleifend. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet.

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

Use .break-all to add line breaks whenever necessary, without trying to preserve whole words.

Lorem ipsum dolor sit amet, consecteturadipiscingelitplaceratnulla eleifend. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet.

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

Use .truncate to truncate overflowing text with an ellipsis (…) if needed.

Lorem ipsum dolor sit amet, consecteturadipiscingelitplaceratnulla eleifend. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet.

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

Variants

By default, no responsive or hover-state variants are generated for word break utilities.

Responsive

To include responsive variants like .md:truncate, add "word-break" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "word-break",
);

Hover-state

To include hover-state variants like .hover:truncate, add "word-break" to the $hover-variants variable:

$hover-variants: (
  // ...
  "word-break",
);