Dans de nombreuses langues écrites, il est possible de couper les lignes entre les syllabes et les mots. Cela permet souvent de placer plus de caractères sur une ligne de texte afin de réduire le nombre de lignes dans une zone de texte et ainsi d'économiser de l'espace. Dans ces langues, la coupure est indiquée visuellement par un trait d'union (-).
Le module de texte CSS de niveau 3 définit une propriété de tirets pour contrôler quand les tirets sont affichés auprès des utilisateurs et comment ils se comportent lorsqu'ils sont affichés. À partir de la version 55, Chrome implémente la propriété tirets.
Conformément à la spécification, la propriété tirets comporte trois valeurs: none, manual et auto. Pour illustrer cela, nous devons utiliser un trait d'union en demi-cadrat (­), comme dans l'exemple suivant.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Un trait d'union en demi-cadrat ne s'affiche que lorsqu'il se trouve à la marge de fin. L'affichage de ce trait d'union dans Chrome 55 ou version ultérieure dépend de la valeur de la propriété CSS hypens.
-webkit-hyphens: manual;
hyphens: manual;
En combinant ces éléments, vous obtenez le résultat suivant:
Notez que le trait d'union en demi-cadrat n'est pas visible. Dans tous les cas, lorsqu'un mot contenant un trait d'union s'affiche sur une seule ligne, le trait d'union est invisible. Voyons maintenant comment se comportent les trois valeurs du trait d'union.
Ne pas utiliser
Dans le premier exemple, la propriété des traits d'union est définie sur none. Cela empêche l'affichage du trait d'union en demi-cadrat. Pour le confirmer, ajustez la taille de la fenêtre afin que le mot "elit" ne s'affiche pas dans la ligne de texte visible.
Manuel
Dans le deuxième exemple, la propriété de tiret est définie sur manual, ce qui signifie que le tiret faible n'apparaît que lorsque la marge coupe le mot "elit". Là encore, vous pouvez le confirmer en ajustant la taille de la fenêtre.
Utiliser l'auto
Dans le troisième exemple, la propriété des traits d'union est définie sur auto. Dans ce cas, aucun trait d'union en demi-cadrat n'est nécessaire, car l'user-agent déterminera automatiquement les emplacements des traits d'union. Si vous redimensionnez la fenêtre, vous constaterez que le navigateur scinde cet exemple au même endroit que dans le deuxième, même si aucun trait d'union n'est présent. Si vous continuez à réduire la fenêtre, vous verrez que votre navigateur peut couper les lignes entre deux syllabes du texte.