Text wrapping

Class	Styles
.text-wrap	white-space: wrap;
.text-nowrap	white-space: nowrap;
.text-balance	white-space: balance;
.text-pretty	white-space: pretty;
.text-break	word-wrap: break-word; word-break: break-word;

Wrapping

Control how text wraps inside an element with text-wrap utilities. This is a newer CSS property that replaces the older white-space property and adds new functionality.

This text should wrap across multiple lines within the parent element.

This text should not wrap across multiple lines within the parent element.

This text should wrap in a balanced way across multiple lines within the parent element.

This text should wrap in a pretty way across multiple lines within the parent element.

HTML

<div class="text-wrap">…</div>
<div class="text-nowrap">…</div>
<div class="text-balance">…</div>
<div class="text-pretty">…</div>

Word break

Prevent long strings of text from breaking your components' layout by using .text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

HTML

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Note that breaking words isn't possible in Arabic, which is the most used RTL language. Therefore .text-break is removed from our RTL compiled CSS.

CSS

Sass utilities API

Text wrapping utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

SCSS

"white-space": (
  property: white-space,
  class: text,
  values: (
    wrap: normal,
    nowrap: nowrap,
  )
),
"word-wrap": (
  property: word-wrap word-break,
  class: text,
  values: (break: break-word),
  rtl: false
),