hyphens

Set how to split words to improve the layout of paragraphs.

Overview

Examples

Allow automatic hyphenation

Use hyphens:auto for narrow text columns where long words can otherwise create uneven lines.

<p lang="en" class="hyphens:auto">    Antidisestablishmentarianism can hyphenate when the browser has language data.</p>

@layer utilities {    .hyphens\:auto {        hyphens: auto    }}

Respect manual hyphenation points

Use hyphens:manual when the content includes soft hyphens or explicit hyphenation decisions.

<p class="hyphens:manual">trans&shy;formation</p>

Disable hyphenation

Use hyphens:none for codes, product names, or text where inserted hyphens would change meaning.

<code class="hyphens:none">MASTERCSS_RUNTIME_TOKEN</code>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<p class="hyphens:auto hyphens:none@sm hyphens:none@print">...</p>