Quick reference
| Class | Properties |
|---|---|
.text-break | word-wrap: break-word; word-break: break-word; |
.break-normal | word-wrap: normal; word-break: normal; |
Basic usage
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.
Normal
Use break-normal to only add line breaks at normal word break points.
The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
<p class="break-normal ...">...</p>
Break Words
Use text-break to add line breaks mid-word if needed.
The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
<p class="text-break ...">...</p>