La propriété hyphens indique au navigateur comment gérer les traits d'union lors des sauts de ligne. Grâce à elle, on peut empêcher l'utilisation des traits d'union en fin de ligne, contrôler quand ils sont ajoutés ou laisser le navigateur décider.

Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut lang et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut xml:lang.

Note : Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.

Syntaxe

/* Valeurs avec un mot-clé */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Valeurs globales */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

Valeurs

none
Les mots ne sont pas coupés en fin de ligne et ce même si les caractères invitent à une coupe. Les lignes se termineront uniquement sur des blancs.
manual
Les mots sont coupés là où des caractères invitant à un saut de ligne sont présents. Voir la section suivante pour plus de détails.
auto
Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.
Note : Le comportement défini par auto dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML lang pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.

Syntaxe formelle

none | manual | auto

Suggérer des emplacements de coupe pour les lignes

Deux caractères Unicode peuvent être utilisés manuellement pour indiquer des emplacement où effectuer des sauts de ligne :

U+2010 (HYPHEN)
Un trait d'union « dur » qui indique un emplacement indiqué pour un saut de ligne. Même si la ligne n'est pas coupée à cet endroit, le trait d'union est affiché.
U+00AD (SOFT HYPHEN)
Un trait d'union « doux ». Ce caractère n'est pas affichée de façon visible. Il indique au navigateur un emplacement où effectuer le saut de ligne si nécessaire. En HTML, on peut utiliser l'entité ­ pour insérer ce caractère.

Exemples

Dans cet exemple, on crée trois classes CSS pour illustrer chacune des configurations possibles pour la propriété hyphens.

CSS

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;
}

HTML

<ul>
  <li><code>none</code>: aucun trait d'union, dépassement si nécessaire
    <p lang="en" class="none">An extreme&shy;ly long English word</p>
  </li>  
  <li><code>manual</code>: un trait d'union uniquement à &amp;hyphen; ou &amp;shy; (si nécessaire)
    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
  </li>
  <li><code>auto</code>: un trait d'union où l'algorithme l'estime nécessaire
    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
  </li>
</ul>

Résultat

Spécifications

Spécification État Commentaires
CSS Text Module Level 3
La définition de 'hyphens' dans cette spécification.
Version de travail Définition initiale.

Valeur initialemanual
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

55

13 -webkit- 1

?

43

6 -moz- 2

10 -ms- 3445.1 -webkit-
Hyphenation dictionary for Afrikaans (af, af-*) ? ?8 Non ? Non
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) ? ?8 Non ? Non
Hyphenation dictionary for Bulgarian (bg, bg-*) ? ?8 Non ? Non
Hyphenation dictionary for Catalan (ca, ca-*) ? ?810 ?5.1
Hyphenation dictionary for Croatian (hr, hr-*) ? ?810 ?9.1
Hyphenation dictionary for Czech (cs, cs-*) ? ? Non10 ?9.1
Hyphenation dictionary for Esperanto (eo, eo-*) ? ?8 Non ? Non
Hyphenation dictionary for Estonian (et, et-*) ? ?8 Non ? Non
Hyphenation dictionary for Danish (da, da-*) ? ?810 ?5.1
Hyphenation dictionary for Dutch (nl, nl-*) ? ?810 ?5.1
Hyphenation dictionary for Finnish (fi, fi-*) ? ?810 ?9.1
Hyphenation dictionary for French (fr, fr-*) ? ?810 ?5.1
Hyphenation dictionary for Galician (gl, gl-*) ? ?9 Non ? Non
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*) ? ?810 ?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 Non ?9.1
Hyphenation dictionary for Icelandic (is, is-*) ? ?8 Non ? Non
Hyphenation dictionary for Interlingua (ia, ia-*) ? ?8 Non ? Non
Hyphenation dictionary for Italian (it, it-*) ? ?910 ?5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*) ? ?8 Non ? Non
Hyphenation dictionary for Latin (la, la-*) Oui ?8 Non44 Non
Hyphenation dictionary for Lithuanian (lt, lt-*) ? ?8 Non ? Non
Hyphenation dictionary for Mongolian (mn, mn-*) ? ?8 Non ? Non
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*) ? ?810 ?5.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*) ? ?810 ? Non
Hyphenation dictionary for Polish (pl, pl-*) ? ?3110 ?9.1
Hyphenation dictionary for Portuguese (pt, pt-*) ? ?810 ?9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR) ? ?8410 ? Non
Hyphenation dictionary for Russian (ru, ru-*) ? ?810 ?5.1
Hyphenation dictionary for Slovenian (sl, sl-*) ? ?8 Non ? Non
Hyphenation dictionary for Spanish (es, es-*) ? ?810 ?5.1
Hyphenation dictionary for Swedish (sv, sv-*) ? ?810 ?5.1
Hyphenation dictionary for Turkish (tr, tr-*) ? ?910 ?5.1
Hyphenation dictionary for Ukrainian (uk, uk-*) ? ?9 Non ?9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*) ? ?8 Non ? Non
Hyphenation dictionary for Welsh (cy, cy-*) ? ?8 Non ? Non
Hyphenation dictionary for English (en, en-*)55 ?6510445.16
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

55

4 -webkit-

55 ?

43

6 -moz- 2

444.2 -webkit- ?
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-*) Oui Oui ? ?44 ? ?
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-*)5555 ? ?44 ? ?

1. Only -webkit-hyphens: none is supported.

2. Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.

3. Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Internet Explorer.

4. For Brazilian Portuguese, Firefox uses a Portuguese dictionary.

5. For English, Firefox uses an en-US dictionary

6. For English, Safari uses different en-GB and en-US dictionaries.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Menkid, Sebastianz, SJW, teoli, MorganeH, FredB
 Dernière mise à jour par : SphinxKnight,