La propriété CSS hyphens
Utilisez la propriété CSS hyphens pour contrôler la coupure des mots. Découvrez les valeurs et des exemples.
La propriété CSS hyphens contrôle la façon dont les mots sont coupés avec des traits d'union lorsque le texte passe à la ligne suivante. La césure consiste à diviser un mot long en un point approprié et à ajouter un trait d'union (-) en fin de ligne, afin que le texte remplisse plus uniformément les colonnes étroites, sans laisser de grands espaces vides ni laisser déborder un long mot.
Cette page couvre les trois valeurs acceptées par la propriété (none, manual et auto), le rôle de l'attribut lang, les caractères de trait d'union doux et dur que vous pouvez insérer manuellement, et la relation entre hyphens et les autres propriétés de coupure du texte.
Pourquoi et quand utiliser hyphens
La césure est surtout utile dans les conteneurs étroits — barres latérales, mises en page mobiles, textes multicolonnes, ou tout élément avec une petite width. Sans elle, un mot non sécable (une longue URL, un nom chimique, un mot composé allemand) peut dépasser son conteneur ou créer un alignement à droite irrégulier avec des espaces blancs maladroits. Activer hyphens: auto permet au navigateur de couper ces mots à des endroits valides et de garder un texte justifié ou étroit bien présenté.
On utilise généralement hyphens conjointement avec text-align: justify, ou lorsque le contenu est généré par l'utilisateur et que l'on ne peut pas prédire la longueur des mots.
hyphens: auto ne fonctionne que lorsque la langue de l'élément est connue. Définissez-la avec l'attribut lang (par exemple <html lang="en">), car le navigateur a besoin du dictionnaire de césure de la langue pour déterminer où les coupures sont autorisées. Sans lang, auto se comporte comme manual.
Les règles de césure ne sont pas explicitement définies dans la spécification, donc les points de coupure exacts peuvent varier d'un navigateur à l'autre.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. |
| Héritage | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | Object.style.hyphens = "none"; |
Syntaxe
Syntaxe de la propriété CSS hyphens
hyphens: none | manual | auto | initial | inherit;Exemple de la propriété hyphens :
Exemple de la propriété CSS hyphens avec les valeurs none, manual et auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 55px;
border: 1px solid #666;
}
p.none {
hyphens: none;
}
p.manual {
hyphens: manual;
}
p.auto {
hyphens: auto;
}
</style>
</head>
<body>
<h2>Hyphens property example</h2>
<h3>none</h3>
<p class="none">An extreme­ly lengthy sentence</p>
<h3>manual</h3>
<p class="manual">An extreme­ly lengthy sentence</p>
<h3>auto</h3>
<p class="auto" lang="en">An extreme­ly lengthy sentence</p>
</body>
</html>Résultat
Dans l'exemple donné, les trois valeurs sont incluses afin de voir les différences.
Les préfixes navigateur ne sont plus nécessaires pour les navigateurs modernes.
Opportunités de saut de ligne
À l'aide des deux caractères Unicode ci-dessous, nous pouvons définir manuellement des points de saut de ligne potentiels dans le texte :
U+00AD (SHY / Trait d'union doux)
Ce caractère est rendu de manière invisible. Il indique un endroit où le navigateur doit couper le mot, dans le cas où la césure est nécessaire. Pour insérer SHY, utilisez .
U+2010 (HYPHEN / Trait d'union dur)
Ce caractère indique une possibilité de saut de ligne visible. Le trait d'union est rendu même si la ligne n'est pas coupée à cet endroit.
Valeurs
| Valeur | Description |
|---|---|
| none | Aucune césure. Les mots ne sont pas coupés aux sauts de ligne, même si les caractères suggèrent des points de saut de ligne. |
| manual | Les mots sont coupés uniquement pour le renvoi à la ligne lorsqu'il existe des opportunités de saut de ligne à l'intérieur du mot. Les mots ne sont coupés qu'avec ‐ ou ­. |
| auto | Le navigateur coupe automatiquement les mots aux points de césure appropriés. Les mots sont coupés là où l'algorithme le décide. Le comportement de la valeur auto dépend de la langue. |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de l'élément parent. |
Propriétés de coupure de texte associées
hyphens est l'une des plusieurs propriétés CSS qui déterminent où et comment le texte peut se couper. Elles sont souvent combinées :
- overflow-wrap — permet au navigateur de couper un mot long uniquement s'il dépasserait autrement son conteneur, sans insérer de trait d'union.
- word-break — contrôle si les mots peuvent être coupés entre n'importe quels caractères (utile pour le texte CJK ou les longues chaînes).
- word-wrap — l'alias hérité de
overflow-wrap. - white-space — détermine si les séquences d'espaces blancs sont réduites et si le texte se coupe du tout.
- line-break — affine les règles de coupure de ligne, principalement pour les langues asiatiques.
Utilisez hyphens pour ajouter des traits d'union aux points de coupure valides, et overflow-wrap / word-break comme filet de sécurité pour les chaînes qui n'ont pas de point de césure valide.
Compatibilité des navigateurs
hyphens: auto est pris en charge par tous les navigateurs modernes. Les anciennes versions de Safari et Edge pré-Chromium nécessitaient des préfixes fournisseurs (-webkit-hyphens, -ms-hyphens), mais ceux-ci ne sont plus nécessaires pour les navigateurs actuels.