The hyphens property controls how words break across lines. It helps long words fit cleanly in narrow columns and improves readability in responsive layouts.
Line wrapping.
Default value.
Browser rules.
Disable breaks.
Language attr.
Set on parent.
The hyphens property in CSS is used to control how words should be hyphenated when text wraps across multiple lines. It is particularly useful for improving the readability of long words in narrow columns, ensuring they break at appropriate hyphenation points.
You will see hyphens in magazine layouts, sidebars, mobile article text, and multilingual sites where column width changes at different screen sizes.
Apply hyphens on text containers such as paragraphs, articles, list items, or column layouts. For automatic hyphenation, use hyphens: auto together with a valid lang attribute and a constrained text width.
Hyphenation is most visible in narrow columns. Widen the viewport or remove the width constraint and you may not see any hyphens at all.
The syntax for the hyphens property is straightforward:
element {
hyphens: none | manual | auto;
}p {
width: 200px;
hyphens: auto;
}The default value of the hyphens property is manual, which means hyphenation only occurs when the soft hyphen character (­) is used in the text.
none, manual, and auto.auto requires a correct lang attribute for language-aware rules.hyphenate-character to customize the break character.| Question | Answer |
|---|---|
| Initial value | manual |
| Applies to | All elements |
| Inherited | Yes |
| Animatable | No |
| Common use | Narrow columns, articles, and responsive body text |
| Value | Description |
|---|---|
none | No hyphenation is applied. Words wrap without automatic or soft hyphens at line breaks. |
manual | Hyphenation occurs only where the soft hyphen character (­) is inserted in the text. |
auto | The browser automatically inserts hyphens where appropriate, based on language and hyphenation rules. |
Beyond the three keyword values, hyphenation interacts with HTML and a related CSS property:
­) — An invisible break opportunity. With manual or auto, the browser may hyphenate at that point when needed.-) — Always visible in the word. It is not the same as automatic line-break hyphenation.hyphenate-character — Changes which character appears at an automatic break, such as "—" instead of "-".Add lang="en", lang="de", or another valid language code on the element or <html> tag so the browser knows which hyphenation dictionary to use.
A narrow paragraph with hyphens: auto (resize the window to see breaks in supporting browsers):
Hyphenation improves readability when long words must fit inside narrow columns. Automatic hyphenation helps text look even and balanced across line breaks.
Enable automatic hyphenation, disable it with none, use manual soft hyphens, and compare none against auto.
Start with the reference example — automatic hyphenation in a narrow paragraph.
Let the browser insert hyphens based on language rules when text wraps.
p {
width: 200px;
hyphens: auto;
}With auto, the browser may split long words at valid syllable boundaries when the column is too narrow to fit the whole word.
Prevent hyphenation entirely so words wrap without break characters.
p {
width: 180px;
hyphens: none;
}none turns off automatic and soft-hyphen breaks at line ends. Useful for headings, buttons, and UI labels.
Insert your own break points and compare disabled versus automatic hyphenation.
Hyphenate only where you insert soft hyphen characters in the HTML.
<style>
p {
hyphens: manual;
}
</style>
<p>inter­national­ization</p>manual is the default behavior. The browser hyphenates only at ­ positions you define in the markup.
See how the same paragraph text behaves with and without automatic hyphenation.
.none { hyphens: none; }
.auto { hyphens: auto; }Side-by-side comparison makes the effect clear: auto may hyphenate long words, while none leaves ragged spacing at line ends.
lang values help both hyphenation and pronunciation.hyphens WorksA long word does not fit in the remaining space on the current line.
none skips breaks, manual checks soft hyphens, and auto uses language rules.
If allowed, the word splits and a hyphen character may appear at the end of the line.
Long words fit narrow layouts with more even spacing between lines.
The hyphens property is widely supported in modern browsers. The auto value works in Chrome 55+, Firefox 43+, Safari 5.1+, and Edge 79+.
All major browsers support hyphens. Automatic hyphenation quality depends on language support and column width.
Bottom line: Safe to use in modern projects. Always set lang and test in your target languages.
The hyphens property is a useful tool for enhancing text readability on the web. By controlling how words break across lines, you can keep narrow and responsive layouts looking clean and well organized.
For beginners, start with hyphens: auto on body text in narrow columns, use none on headings and UI labels, and remember that a valid lang attribute makes automatic hyphenation work properly.
auto in narrow article columnslang attribute on textnone on headings and buttonstext-align: justify carefullymanualhyphensUse these points when improving text in narrow layouts.
Line wrapping.
PurposeSoft hyphens.
DefaultBrowser rules.
SyntaxNo breaks.
PatternSet on parent.
CascadeOpen the HTML editor, try none, manual, and auto, and resize the preview to see hyphenation change.
5 people found this page helpful