CMS Design System

Use the word break utility to prevent long strings of text from breaking layouts.

Format: .ds-u-word-break

.ds-u-word-breakSupercalifragilisticexpialidocious

No word break

Supercalifragilisticexpialidocious

Code snippet

<section class="ds-l-container example-grid">
  <div class="ds-l-row">
    <div class="ds-l-col--2 ds-u-word-break">
      <code class="ds-u-margin-bottom--2 ds-u-fill--transparent">
        .ds-u-word-break
      </code>
      Supercalifragilisticexpialidocious
    </div>
    <div class="ds-l-col--2">
      <div class="ds-u-margin-bottom--2">No word break</div>
      Supercalifragilisticexpialidocious
    </div>
  </div>
</section>