Word break

Class	Styles
.text-break	word-wrap: break-word; word-break: break-word;

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

Word break utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

SCSS

"word-wrap": (
  property: word-wrap word-break,
  class: text,
  values: (break: break-word),
),