CSS - Propriété hyphens
Description.
Définit la césure des mots, c'est à dire s'ils peuvent être coupés en fin de ligne et à quel endroit.
Le fonctionnement de cette propriété avec la valeur auto
(c'est le navigateur qui détermine où couper les mots)
semble un peu capricieux.
La présence d'un attribut lang permet souvent d'améliorer
le résultat.
Vous pouvez aussi insérer le caractère ­ (tiret de césure)
aux endroits où il est pertinent de couper les mots.
Le tiret de césure est invisible lorsqu'il n'est pas nécessaire de couper
le mot, mais s'affiche lorsque le mot est coupé à cet endroit.
La césure des mots permet une mise en page plus agréable : cela permet d'ajuster la longueur des lignes pour les rendre comparables. Si le texte est justifié, la césure évite de devoir ajouter de trop grands espaces entre les mots.
Valeurs pour hyphens.
- hyphens: manual;
Les mots sont coupés à l'emplacement des tirets (
-) ou des tirets de césure (­). - hyphens: none;
Les mots ne sont pas coupés, même s'ils comportent des tirets ou des tirets de césure. Le seul caractère qui permet le retour à la ligne est donc l'espace.
- hyphens: auto; ⚠
L'emplacement des coupures ds mots est déterminée de façon automatique par le navigateur.
On est encore loin d'une prise en charge satisfaisante de cette valeur par les navigateurs courants (2020).
- hyphens:
initial;La valeur initiale est
manual. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
En modifiant la largeur du bloc ci-dessous, vous pouvez faire en sorte
que le mot "anticonstitutionnellement" entre ou non sur la première ligne du texte.
La propriété CSS hypens détermine si le mot est coupé ou pas.
Remarque : la valeur auto qui devrait permettre la césure automatique,
même sans la présence des tirets, fonctionne sur peu de navigateurs.
hyphens :
Phrase avec des tirets de césure ( ­ ) :
Certains mots sont très longs, comme par exemple anticonstitutionnellement,
qui est, parait-il, le mot le plus long de la langue française.
Phrase sans tirets de césure :
Certains mots sont très longs, comme par exemple anticonstitutionnellement,
qui est, parait-il, le mot le plus long de la langue française.
Prise en charge par les navigateurs (compatibilité).
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Césure et coupure des mots - Propriétés.
overflow-wrap: Gestion des coupures de mots.white-space: Gestion des espaces multiples et des retours chariot.word-break: Coupure des mots longs.word-wrap: Coupure des mots.
Blocs de texte - Propriétés.
direction: Sens d'écriture.letter-spacing: Espacement des lettres.line-height: Définit la hauteur des lignes de texte.text-align: Alignement du texte.text-align-last: Alignement de la dernière ligne des paragraphes.text-emphasis-color: Définit la couleur des caractères de mise en exergue.text-emphasis-position: Position des caractères de mise en exergue.text-emphasis-style: Style de mise en exergue.text-indent: Définit le retrait de la première ligne des paragraphe (indentation).text-justify: Méthode utilisée pour justifier le texte.text-overflow: Indication de débordement du texte.unicode-bidi: Gestion des possibilités d'écriture bidirectionnelle de Unicode.word-spacing: Espacement des mots.writing-mode: Sens et direction d'écriture (horizontale ou verticale).