The hyphens
CSS property specifies how words should be hyphenated when text wraps across multiple lines. You can prevent hyphenation entirely, use hyphenation in manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.
Hyphenation rules are language-specific. In HTML, the language is determined by the lang
attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. In XML, the xml:lang
attribute must be used.
Note: The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.
/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* Global values */ hyphens: inherit; hyphens: initial; hyphens: unset;
The hyphens
property is specified as a single keyword value chosen from the list below.
none
manual
auto
Note: The auto
setting's behavior depends on the language being properly tagged so that the appropriate hyphenation rules can be selected. You must specify a language using the lang
HTML attribute in order to guarantee that automatic hyphenation is applied in the language of your choice.
none | manual | auto
There are two Unicode characters that can be used to manually specify potential line break points within text:
­
to insert a soft hyphen.This example uses three classes, one for each possible configuration of the hyphens
property.
<ul> <li><code>none</code>: no hyphen; overflow if needed <p lang="en" class="none">An extreme­ly long English word</p> </li> <li><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed) <p lang="en" class="manual">An extreme­ly long English word</p> </li> <li><code>auto</code>: hyphen where the algorithm is deciding (if needed) <p lang="en" class="auto">An extreme­ly long English word</p> </li> </ul>
p { width: 55px; border: 1px solid black; } p.none { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } p.manual { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } p.auto { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3 The definition of 'hyphens' in that specification. | Working Draft | Initial definition |
Initial value | manual |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 55
|
12
|
43
|
10
|
44
|
5.1
|
Hyphenation dictionary for Afrikaans (af, af-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Bulgarian (bg, bg-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Catalan (ca, ca-*) | ? | ? | 8 | 10 | ? | 5.1 |
Hyphenation dictionary for Croatian (hr, hr-*) | ? | ? | 8 | 10 | ? | 9.1 |
Hyphenation dictionary for Czech (cs, cs-*) | ? | ? | No | 10 | ? | 9.1 |
Hyphenation dictionary for Esperanto (eo, eo-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Estonian (et, et-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Danish (da, da-*) | ? | ? | 8 | 10 | ? | 5.1 |
Hyphenation dictionary for Dutch (nl, nl-*) | ? | ? | 8 | 10 | ? | 5.1 |
Hyphenation dictionary for Finnish (fi, fi-*) | ? | ? | 8 | 10 | ? | 9.1 |
Hyphenation dictionary for French (fr, fr-*) | ? | ? | 8 | 10 | ? | 5.1 |
Hyphenation dictionary for Galician (gl, gl-*) | ? | ? | 9 | No | ? | No |
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*) | ? | ? | 8 | 10 | ? | 5.1 |
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901) | ? | ? | 8 | ? | ? | ? |
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*) | ? | ? | 8 | ? | ? | ? |
Hyphenation dictionary for Hungarian (hu, hu-*) | ? | ? | 9 | No | ? | 9.1 |
Hyphenation dictionary for Icelandic (is, is-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Interlingua (ia, ia-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Italian (it, it-*) | ? | ? | 9 | 10 | ? | 5.1 |
Hyphenation dictionary for Kurmanji (kmr, kmr-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Latin (la, la-*) | Yes | ? | 8 | No | 44 | No |
Hyphenation dictionary for Lithuanian (lt, lt-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Mongolian (mn, mn-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*) | ? | ? | 8 | 10 | ? | 5.1 |
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*) | ? | ? | 8 | 10 | ? | No |
Hyphenation dictionary for Polish (pl, pl-*) | ? | ? | 31 | 10 | ? | 9.1 |
Hyphenation dictionary for Portuguese (pt, pt-*) | ? | ? | 8 | 10 | ? | 9.1 |
Hyphenation dictionary for Brazilian Portuguese (pt-BR) | ? | ? | 8
|
10 | ? | No |
Hyphenation dictionary for Russian (ru, ru-*) | ? | ? | 8 | 10 | ? | 5.1 |
Hyphenation dictionary for Slovenian (sl, sl-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Spanish (es, es-*) | ? | ? | 8 | 10 | ? | 5.1 |
Hyphenation dictionary for Swedish (sv, sv-*) | ? | ? | 8 | 10 | ? | 5.1 |
Hyphenation dictionary for Turkish (tr, tr-*) | ? | ? | 9 | 10 | ? | 5.1 |
Hyphenation dictionary for Ukrainian (uk, uk-*) | ? | ? | 9 | No | ? | 9.1 |
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for Welsh (cy, cy-*) | ? | ? | 8 | No | ? | No |
Hyphenation dictionary for English (en, en-*) | 55 | ? | 6
|
10 | 44 | 5.1
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 55
|
55
|
? | 43
|
44 | 4.2
|
6.0 |
Hyphenation dictionary for Afrikaans (af, af-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Bulgarian (bg, bg-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Catalan (ca, ca-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Croatian (hr, hr-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Czech (cs, cs-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Esperanto (eo, eo-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Estonian (et, et-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Danish (da, da-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Dutch (nl, nl-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Finnish (fi, fi-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for French (fr, fr-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Galician (gl, gl-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Hungarian (hu, hu-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Icelandic (is, is-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Interlingua (ia, ia-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Italian (it, it-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Kurmanji (kmr, kmr-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Latin (la, la-*) | Yes | Yes | ? | ? | 44 | ? | Yes |
Hyphenation dictionary for Lithuanian (lt, lt-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Mongolian (mn, mn-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Polish (pl, pl-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Portuguese (pt, pt-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Brazilian Portuguese (pt-BR) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Russian (ru, ru-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Slovenian (sl, sl-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Spanish (es, es-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Swedish (sv, sv-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Turkish (tr, tr-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Ukrainian (uk, uk-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for Welsh (cy, cy-*) | ? | ? | ? | ? | ? | ? | ? |
Hyphenation dictionary for English (en, en-*) | 55 | 55 | ? | ? | 44 | ? | 6.0 |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens