The hyphens property controls how words are hyphenated when text wraps to the next line. You can ban breaks, allow only suggested breaks, or let the browser choose.
It applies to all elements and is inherited. The initial value is manual. Automatic hyphenation needs a language (lang) and a dictionary the browser supports. Customize the visible mark with hyphenate-character.
auto.Browsers hyphenate with hyphens: auto only when a suitable lang is set and a hyphenation dictionary is available.
hyphens: none | manual | auto | initial | inherit;| Value | Description | Try it |
|---|---|---|
none | No hyphenation. Wrap only at spaces | Try it |
manual | Default. Break only at soft or hard hyphens | Try it |
auto | Browser may hyphenate using language rules | Try it |
initial | Resets to manual | Try it |
inherit | Takes the parent’s hyphens | Try it |
Suggested breaks: soft hyphen ­ (invisible until needed) and hard hyphen ‐ (always visible).
hyphensChoose a mode, set the language for auto, and make the line narrow enough to wrap.
lang on the text or an ancestor (required for reliable auto).none, manual, or auto.manual, add soft hyphens where breaks are allowed.hyphenate-character.| Piece | Required? | Role |
|---|---|---|
hyphens keyword | Yes | none, manual, or auto |
lang | For auto | Selects the hyphenation dictionary |
| Soft hyphens | For predictable manual | Mark allowed break points in the HTML |
| Narrow width | To see wrapping | Wide lines may never need a hyphen |
Toggle modes on a narrow English word that includes soft hyphens.
Each snippet focuses on hyphens. Soft hyphens keep demos predictable. Use Try It Yourself for a live editor.
Disable hyphenation. The word wraps only at spaces.
<style>
p {
hyphens: none;
}
</style>
<p lang="en">An extreme­ly long English word</p>Break only where you place soft hyphens.
<style>
p {
hyphens: manual;
}
</style>
<p lang="en">An extreme­ly long English word</p>­ suggests where a hyphen may appear.Let the browser choose hyphenation points for the language.
<style>
p {
hyphens: auto;
}
</style>
<p lang="en">An extraordinarily long English word</p>lang="en" selects English hyphenation.If nothing hyphenates, check language, width, and other wrap settings.
auto needs a languageWithout lang (or with an unsupported language), automatic hyphenation may not run.
If every word fits, no wrap occurs and no hyphen appears.
word-break: break-all skips hyphensWith word-break: break-all, words can break without showing a hyphen mark.
If wrapping is disabled (for example via white-space: nowrap), hyphenation has nowhere to act.
<wbr> breaks without a hyphenA line break at <wbr> does not insert a hyphen character.
hyphens is a browser typography property. Node.js, Deno, and Bun do not apply it.
none / manual / auto: Chrome 55+, Firefox 43+, Safari 17+, Edge 79+. Auto quality depends on language dictionaries.
Bottom line: Safe for modern sites. Prefer soft hyphens when you need exact break points; use auto for general body text with a correct lang.
none, manual (default), auto.manual.lang and expect dictionary differences across browsers.One line: hyphens chooses none, only suggested breaks, or automatic language-based hyphenation.
Learn how browsers scale images when resized.
8 people found this page helpful