La hyphenspropriété contrôle la césure du texte dans les éléments de niveau bloc. Vous pouvez empêcher la césure de se produire du tout, l'autoriser ou l'autoriser uniquement lorsque certains caractères sont présents.
Notez que cela hyphensdépend de la langue. Sa capacité à trouver des opportunités de pause dépend de la langue, définie dans l' langattribut d'un élément parent. Toutes les langues ne sont pas encore prises en charge et la prise en charge dépend du navigateur spécifique.
Syntaxe
p ( hyphens: none | manual | auto )tirets: aucun
Les mots ne sont jamais coupés aux sauts de ligne, même si les caractères à l'intérieur du mot suggèrent où la césure pourrait ou devrait aller.
tirets: manuel
Les mots ne sont interrompus qu'aux sauts de ligne où il y a des caractères à l'intérieur du mot qui suggèrent des opportunités de saut de ligne. Deux caractères suggèrent une opportunité de saut de ligne:
U+2010(HYPHEN): le trait d'union «dur» indique une opportunité de saut de ligne visible. Même si la ligne n'est pas réellement interrompue à ce stade, le trait d'union est toujours rendu. Littéralement un «-».U+00AD(SHY): un trait d'union invisible et «souple». Ce caractère n'est pas rendu visiblement; au lieu de cela, il suggère un endroit où le navigateur pourrait choisir de casser le mot si nécessaire. En HTML, vous pouvez utiliser-pour insérer un trait d'union souple.
tirets: auto
Les mots peuvent être interrompus aux points de césure appropriés, soit comme déterminé par les caractères de césure (voir ci-dessus) à l'intérieur du mot, soit comme déterminé automatiquement par une ressource de césure appropriée à la langue (si prise en charge par le navigateur ou fournie via @hyphenation-resource).
Les caractères de césure conditionnelle à l'intérieur d'un mot, s'ils sont présents, ont priorité sur les ressources automatiques lors de la détermination des points de césure dans le mot.
traits d'union: tous
Obsolète, ne pas utiliser . Ce n'était que temporairement dans les spécifications pour les tests.
Démo
La démo ci-dessous contient un tas de paragraphes et tout est mis en place hyphens: auto;pour démontrer le concept de césure. L' langattribut est défini ensur l'élément parent.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 88 | 6 * | dix* | 12 * | 5,1 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 4,2 à 4,3 * |
Safari 5+ nécessite -webkit-, Firefox 6+ nécessite -moz-, IE 10+ nécessite -ms-, iOS 4.2+ nécessite -webkit-.
Chrome <55 et le navigateur Android prennent en charge -webkit-hyphens: none, qui est la valeur par défaut, mais aucune des autres valeurs.
Dans Firefox et Internet Explorer, la césure automatique ne fonctionne que pour certaines langues (définies avec l' langattribut). Consultez cette note pour une liste complète des langues prises en charge.
Si vous écrivez un document Web qui a vraiment besoin de césure, vous pouvez utiliser Hyphenator.js qui est une bibliothèque basée sur un vaste dictionnaire qui injectera automatiquement des traits d'union souples et des espaces de largeur nulle dans votre contenu.
Sans JavaScript, vous devrez vous fier à la fois hyphenset word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )