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.

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

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.

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.

Syntaxe formelle

none | manual | auto

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 Level 3
La définition de 'hyphens' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 13-webkit[1]
55

6.0 (6.0)-moz[2]
43.0 (43.0)

10.0-ms[3] Pas de support 5.1-webkit
af, af-* ? 8.0 (8.0) Pas de support Pas de support Pas de support
bg, bg-* ? 8.0 (8.0) Pas de support Pas de support Pas de support
ca, ca-* ? 8.0 (8.0) 10.0 Pas de support 9.1
hr, hr-* ? 8.0 (8.0) Pas de support Pas de support 9.1
cs, cs-* ? Pas de support 10.0 Pas de support 9.1
da, da-* ? 8.0 (8.0) 10.0 Pas de support 9.1
nl, nl-* ? 8.0 (8.0) 10.0 Pas de support 5.1
en, en-* (Oui) 6.0 (6.0)[4] 10.0 Pas de support 5.1[5]
eo, eo-* ? 8.0 (8.0) Pas de support Pas de support Pas de support
et, et-* ? 8.0 (8.0) Pas de support Pas de support Pas de support
fi, fi-* ? 8.0 (8.0) Pas de support Pas de support 9.1
fr, fr-* ? 8.0 (8.0) 10.0 Pas de support 5.1
gl, gl-* ? 9.0 Pas de support Pas de support Pas de support
orthographe allemande traditionnelle de 1901 (de-1901, de-AT-1901, de-DE-1901) ? 8.0 ? Pas de support ?
ortographe allemande réformée de 1996 (de, de-1996, de-DE, de-AT, de-*) ? 8.0 10.0 Pas de support 5.1
orthographe suisse allemande (de-CH, de-CH-*) ? 8.0 ? Pas de support ?
hu, hu-* ? 9.0 Pas de support Pas de support 9.1
is, is-* ? 8.0 Pas de support Pas de support Pas de support
ia, ia-* ? 8.0 Pas de support Pas de support Pas de support
it, it-* ? 9.0 10.0 Pas de support 5.1
kmr, kmr-* ? 8.0 Pas de support Pas de support Pas de support
la, la-* ? 8.0 Pas de support Pas de support Pas de support
lt, lt-* ? 8.0 Pas de support Pas de support Pas de support
mn, mn-* ? 8.0 Pas de support Pas de support Pas de support
norvégien Bokmål (no, no-*, nb, nb-*) ? 8.0 10.0 Pas de support 9.1
norvégien nynorsk (nn, nn-*) ? 8.0 10.0 Pas de support Pas de support
pl, pl-* ? 31.0 10.0 Pas de support 9.1
pt, pt-* ? 8.0[6] 10.0 Pas de support 9.1
portugais brésilien (pt-BR) Pas de support 8.0[6] 10.0 Pas de support Pas de support
ru, ru-* Pas de support 8.0 10.0 Pas de support 5.1
Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-* Pas de support 8.0 Pas de support Pas de support Pas de support
sl, sl-* ? 8.0 Pas de support Pas de support Pas de support
es, es-* ? 8.0 10.0 Pas de support 5.1
sv, sv-* ? 8.0 10.0 Pas de support 9.1
tr, tr-* ? 9.0 10.0 Pas de support 9.1
uk, uk-* ? 9.0 Pas de support Pas de support 9.1
hsb, hsb-* ? 8.0 Pas de support Pas de support Pas de support
cy, cy-* ? 8.0 Pas de support Pas de support Pas de support
Autres langues ? Pas de support Pas de support Pas de support Pas de support
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome pour Android
Support simple 4.0-webkit[1] 55 6.0 (6.0)-moz[2]
43.0 (43.0)
Pas de support Pas de support 4.2-webkit 55
af, af-* ? ? ? ? ? ? ?
bg, bg-* ? ? ? ? ? ? ?
ca, ca-* ? ? ? ? ? ? ?
hr, hr-* ? ? ? ? ? ? ?
cs, cs-* ? ? ? ? ? ? ?
da, da-* ? ? ? ? ? ? ?
nl, nl-* ? ? ? ? ? ? ?
en, en-* ? (Oui) ? ? ? ? (Oui)
eo, eo-* ? ? ? ? ? ? ?
et, et-* ? ? ? ? ? ? ?
fi, fi-* ? ? ? ? ? ? ?
fr, fr-* ? ? ? ? ? ? ?
gl, gl-* ? ? ? ? ? ? ?
orthographe allemande traditionnelle de 1901 (de-1901, de-AT-1901, de-DE-1901) ? ? ? ? ? ? ?
ortographe allemande réformée de 1996 (de, de-1996, de-DE, de-AT, de-*) ? ? ? ? ? ? ?
orthographe suisse allemande (de-CH, de-CH-*) ? ? ? ? ? ? ?
hu, hu-* ? ? ? ? ? ? ?
is, is-* ? ? ? ? ? ? ?
ia, ia-* ? ? ? ? ? ? ?
it, it-* ? ? ? ? ? ? ?
kmr, kmr-* ? ? ? ? ? ? ?
la, la-* ? ? ? ? ? ? ?
lt, lt-* ? ? ? ? ? ? ?
mn, mn-* ? ? ? ? ? ? ?
norvégien Bokmål (no, no-*, nb, nb-*) ? ? ? ? ? ? ?
norvégien nynorsk (nn, nn-*) ? ? ? ? ? ? ?
pl, pl-* ? ? ? ? ? ? ?
pt, pt-* ? ? ? ? ? ? ?
portugais brésilien (pt-BR) ? ? ? ? ?
ru, ru-* ? ? ? ? ? ? ?
Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) ? ? ? ? ? ? ?
sl, sl-* ? ? ? ? ? ? ?
es, es-* ? ? ? ? ? ? ?
sv, sv-* ? ? ? ? ? ? ?
tr, tr-* ? ? ? ? ? ? ?
uk, uk-* ? ? ? ? ? ? ?
hsb, hsb-* ? ? ? ? ? ? ?
cy, cy-* ? ? ? ? ? ? ?
Autres langues ? ? ? ? ? ? ?

[1] Pas de trait d'union/saut de ligne automatique : seul -webkit-hyphens: none est pris en charge.

[2] La gestion automatique des sauts de ligne et des traits d'union ne fonctionne que pour les langues dont un dictionnaire de règles est intégré à Gecko.

[3] La gestion automatique des sauts de ligne et des traits d'union ne fonctionne que pour les langues dont un dictionnaire de règles est intégré à Internet Explorer.

[4] Utilise un dictionnaire en-US.

[5] en-GB et en-US utilisent des dictionnaires différents.

[6] Utilise un dictionnaire portugais.

Voir aussi

Étiquettes et contributeurs liés au document

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