Components › Utilities

Hyphenation

The hyphenation class should be placed on text that might be served in narrow width containers and is not truncated.

BaseBasedev ready

Preview

Code

<p class="slds-text-heading--small slds-hyphenate">A long heading might be supercalifragilisticexpiallidocious.</p>

Component Overview

This will allow the text to break, or hyphenate, depending on the browser's capabilities. Chrome currently doesn't show the hyphenation, but the bug is currently marked fixed, so it should soon.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-hyphenate
Applied to:

any element

Outcome:

Creates hyphenated text

Required:

No, optional element or modifier

Comments:

Hyphenation will occur at the parent width if a width is not specified