Paragraphs & wrapping
hyphens
hyphens decides whether a word that does not fit on a line may be split, with a hyphen (-) added before the break. In languages that separate words with spaces, such as English, it evens out the ragged right edge.
Syntax
none | manual | autoPreview
Code
.box {
font-size: 28px;
hyphens: auto;
}Controls
About
Writing the value
none: never splits words, not even at soft hyphens.manual: splits only where a soft hyphen (­, U+00AD) or a "-" is written. This is the initial value.auto: the browser uses a dictionary for the language to find where words may be split.
auto needs a language
auto only works when the language is known from a lang attribute on the element or an ancestor. Which languages have a dictionary also depends on the browser, and it does nothing for languages that do not split words, such as Japanese.
The preview on this page uses 28px text so the long words do not fit on one line. "extraordinary" and "typographic" contain soft hyphens, so manual can split them too, but only auto can split "Internationalization", which has none.
Safari long required the prefixed -webkit-hyphens, so write both to reach older Safari versions.