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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support partiel 55
Notes
Support partiel 55
Notes
Notes auto value is only supported on macOS and Android.
Support complet 13
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Only -webkit-hyphens: none is supported.
Edge Support complet 12
Préfixée Notes
Support complet 12
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Internet Explorer.
Firefox Support complet 43
Support complet 43
Support complet 6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
IE Support complet 10
Préfixée Notes
Support complet 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Internet Explorer.
Opera Support partiel 44
Notes
Support partiel 44
Notes
Notes auto value is only supported on macOS and Android.
Safari Support complet 5.1
Préfixée
Support complet 5.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 55
Support complet 55
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 55
Support complet 55
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile ? Firefox Android Support complet 43
Support complet 43
Support complet 6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
Opera Android Support complet 44Safari iOS Support complet 4.2
Préfixée
Support complet 4.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 6.0
Hyphenation dictionary for Afrikaans (af, af-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Bulgarian (bg, bg-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Catalan (ca, ca-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Croatian (hr, hr-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Czech (cs, cs-*)Chrome ? Edge ? Firefox Aucun support NonIE Support complet 10Opera ? Safari Support complet 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Esperanto (eo, eo-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Estonian (et, et-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Danish (da, da-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Dutch (nl, nl-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Finnish (fi, fi-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for French (fr, fr-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Galician (gl, gl-*)Chrome ? Edge ? Firefox Support complet 9IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)Chrome ? Edge ? Firefox Support complet 8IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)Chrome ? Edge ? Firefox Support complet 8IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Hungarian (hu, hu-*)Chrome ? Edge ? Firefox Support complet 9IE Aucun support NonOpera ? Safari Support complet 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Icelandic (is, is-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Interlingua (ia, ia-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Italian (it, it-*)Chrome ? Edge ? Firefox Support complet 9IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Kurmanji (kmr, kmr-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Latin (la, la-*)Chrome Support complet OuiEdge ? Firefox Support complet 8IE Aucun support NonOpera Support complet 44Safari Aucun support NonWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile ? Firefox Android ? Opera Android Support complet 44Safari iOS ? Samsung Internet Android Support complet Oui
Hyphenation dictionary for Lithuanian (lt, lt-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Mongolian (mn, mn-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Polish (pl, pl-*)Chrome ? Edge ? Firefox Support complet 31IE Support complet 10Opera ? Safari Support complet 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Portuguese (pt, pt-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Brazilian Portuguese (pt-BR)Chrome ? Edge ? Firefox Support complet 8
Notes
Support complet 8
Notes
Notes For Brazilian Portuguese, Firefox uses a Portuguese dictionary.
IE Support complet 10Opera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Russian (ru, ru-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Slovenian (sl, sl-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Spanish (es, es-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Swedish (sv, sv-*)Chrome ? Edge ? Firefox Support complet 8IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Turkish (tr, tr-*)Chrome ? Edge ? Firefox Support complet 9IE Support complet 10Opera ? Safari Support complet 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Ukrainian (uk, uk-*)Chrome ? Edge ? Firefox Support complet 9IE Aucun support NonOpera ? Safari Support complet 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Welsh (cy, cy-*)Chrome ? Edge ? Firefox Support complet 8IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for English (en, en-*)Chrome Support complet 55Edge ? Firefox Support complet 6
Notes
Support complet 6
Notes
Notes For English, Firefox uses an en-US dictionary
IE Support complet 10Opera Support complet 44Safari Support complet 5.1
Notes
Support complet 5.1
Notes
Notes For English, Safari uses different en-GB and en-US dictionaries.
WebView Android Support complet 55Chrome Android Support complet 55Edge Mobile ? Firefox Android ? Opera Android Support complet 44Safari iOS ? Samsung Internet Android Support complet 6.0

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

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,