Hyphens property
Last updated: 2026-09-13
hyphens Hyphens property
The hyphens CSS property controls whether the browser uses hyphens (-) to break words inside lines, commonly used in multi-syllable languages like English. With automatic hyphenation enabled, the browser inserts hyphens at suitable positions based on a language dictionary so text wraps more naturally at the container edge and ragged gaps are reduced.
| Category | |
|---|---|
| Initial Value | manual |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
hyphens: none | manual | auto;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | manual | auto | Keyword | Hyphenation behavior |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| hyphens | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： Automatic hyphenation needs a lang attribute in the HTML (e.g. lang="en") so the browser can consult the language dictionary for break points.
Important： Use (soft hyphen) to mark allowed break positions manually; the hyphen only shows when the browser actually needs to break there.
❓ FAQ
QDoes the hyphens property have any effect at all on Chinese text in CSS?
AChinese has no concept of word boundaries, so hyphens has basically no effect on Chinese text. Chinese wrapping is normally controlled with word-break or overflow-wrap.
QWhat is the difference between manual and auto values of hyphens?
Amanual only breaks at positions you marked explicitly with a soft hyphen (); auto lets the browser pick break positions itself based on the language dictionary — smarter, but it requires the correct lang attribute.
QHow do I make English text hyphenate automatically with the hyphens property?
ASet hyphens: auto and make sure the HTML has the right lang attribute (e.g. lang="en"); the browser then adds hyphens at word endings according to the dictionary. Hyphens only breaks when a word cannot fit, and it works best with text-align: justify.
QWhat is the current browser support for the CSS hyphens property across browsers?
AAll modern browsers support it, but iOS Safari requires the -webkit-hyphens prefix. Because it relies on language dictionaries, the same text may break at different positions in different language environments.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
