hyphens
Control language-dependent and manual hyphenation opportunities.
Overview
| Class | Declarations |
|---|---|
hyphens:none | hyphens: none;
|
hyphens:manual | hyphens: manual;
|
hyphens:auto | hyphens: auto;
|
Examples
Allow automatic hyphenation
hyphens:auto permits dictionary-based hyphenation. Set the content language with lang; actual hyphenation depends on the browser’s available language data.
<!-- hyphens:none --><div id="scrollport" role="region" aria-label="Automatic hyphenation" tabindex="0" class="overflow:auto w:128px max-w:100%"> <p id="target" lang="en" class="w:128px m:0 font-md leading:24px hyphens:none">Antidisestablishmentarianism</p></div><!-- hyphens:auto --><div id="scrollport" role="region" aria-label="Automatic hyphenation" tabindex="0" class="overflow:auto w:128px max-w:100%"> <p id="target" lang="en" class="w:128px m:0 font-md leading:24px hyphens:auto">Antidisestablishmentarianism</p></div>Generated CSS
@layer utilities { .hyphens\:auto { hyphens: auto }}A browser without a suitable dictionary may leave the word unbroken. The specimen does not insert fake hyphens.
Respect manual hyphenation points
hyphens:manual permits a break at an authored soft hyphen. ­ is invisible when no break is needed and supplies a hyphen when the line breaks there.
<!-- Narrow · soft hyphen used --><p id="target" class="w:100px m:0 font-md leading:24px hyphens:manual">trans­formation</p><!-- Wide · soft hyphen hidden --><p id="target" class="w:220px max-w:100% m:0 font-md leading:24px hyphens:manual">trans­formation</p>Disable hyphenation
hyphens:none suppresses both automatic and soft-hyphen opportunities. Compare the same authored word at the same width; other break opportunities, such as spaces, still work.
<!-- hyphens:manual --><div id="scrollport" role="region" aria-label="Manual hyphenation comparison" tabindex="0" class="overflow:auto w:100px max-w:100%"> <p id="target" class="w:100px m:0 font-md leading:24px hyphens:manual">trans­formation</p></div><!-- hyphens:none --><div id="scrollport" role="region" aria-label="Manual hyphenation comparison" tabindex="0" class="overflow:auto w:100px max-w:100%"> <p id="target" class="w:100px m:0 font-md leading:24px hyphens:none">trans­formation</p></div>Apply conditionally
Resize this fluid column from 80px toward 100px. It starts with an explicit soft-hyphen opportunity. At sm on screen, and in print, hyphenation is disabled; the whole word still exceeds the column width and can be scrolled.
<!-- Fluid column · native hyphenation reset --><div id="scrollport" role="region" aria-label="Responsive hyphenation" tabindex="0" class="overflow:auto w:clamp(80px,10vw,100px) max-w:100%"> <p id="target" class="w:100% m:0 font-md leading:24px hyphens:manual hyphens:none@print hyphens:none@screen@sm">trans­formation</p></div>