CSS - Caractère de césure

Lucas D. -

Syntaxe et utilisation

La propriété CSS hyphens contrôle la césure du texte dans un élément. Elle accepte trois valeurs : none, manual et auto.

  1. none : C'est la valeur par défaut. Lorsqu'elle est définie sur none, la césure est désactivée et les mots ne seront pas coupés, même s'ils dépassent l'espace disponible.

  2. manual : Lorsqu'elle est définie sur manual, la césure est activée mais ne s'applique qu'aux mots coupés manuellement à l'aide du caractère de césure conditionnelle (­). Cela permet un contrôle spécifique sur les mots qui doivent être coupés.

  3. auto : Lorsqu'elle est définie sur auto, le navigateur coupe automatiquement les mots selon les besoins pour optimiser la mise en page du texte en fonction des règles linguistiques et typographiques.

Conseil: Exemple de syntaxe

.element {
  hyphens: auto;
}

La prise en charge de cette propriété par les navigateurs varie. La plupart des navigateurs modernes la prennent en charge, mais certaines versions plus anciennes peuvent ne pas le faire. Pour vérifier la compatibilité avec différents navigateurs, vous pouvez consulter des ressources en ligne comme Can I Use (https://caniuse.com/#feat=css-hyphens).

Lors de l'utilisation de cette propriété, il est recommandé de spécifier également l'attribut lang sur l'élément HTML ou d'utiliser la propriété CSS lang pour indiquer la langue de votre contenu textuel. Cela aide à appliquer les règles correctes spécifiques à cette langue.

Gardez à l'esprit que cette propriété ne s'applique qu'aux éléments de niveau bloc et aux éléments inline-block. Elle ne fonctionne pas sur les éléments en ligne, sauf si une largeur spécifique leur est attribuée.

Césure avec CSS

Réglage de la césure

Pour activer la césure automatique du texte dans un élément, vous pouvez utiliser la propriété hyphens avec la valeur auto. Lorsqu'elle est réglée sur auto, le navigateur ajoutera automatiquement des traits d'union aux mots selon les besoins pour les diviser sur plusieurs lignes, améliorant ainsi la mise en page et la lisibilité du texte.

Conseil: Réglage de la césure

p {
  hyphens: auto;
}

Spécification de la zone de césure

La propriété hyphenate-limit-zone vous permet de définir la largeur de la zone de césure, qui est la zone près du bord du conteneur où les traits d'union sont autorisés. Cette propriété prend une valeur de longueur.

Conseil: Spécification de la zone de césure

p {
  hyphens: auto;
  hyphenate-limit-zone: 50px;
}

Limitation des traits d'union consécutifs

Pour contrôler le nombre minimum de caractères avant et après un trait d'union, vous pouvez utiliser la propriété hyphenate-limit-chars. Elle prend trois valeurs : le nombre minimum de caractères avant un trait d'union, le nombre minimum de caractères après un trait d'union, et une troisième valeur optionnelle pour la longueur minimale du mot éligible à une coupure.

Conseil: Limitation des traits d'union consécutifs

p {
  hyphens: auto;
  hyphenate-limit-chars: 4 3 8;
}

Contrôle des coupures de césure

La propriété hyphenate-limit-lines vous permet de limiter le nombre de lignes consécutives pouvant se terminer par un point de coupure. Elle aide à éviter trop de lignes coupées à la suite.

Conseil: Contrôle des coupures de césure

p {
  hyphens: auto;
  hyphenate-limit-lines: 2; 
}

Dans cet exemple, pas plus de deux lignes consécutives ne se termineront par des coupures. Si une autre ligne en avait besoin, elle serait déplacée à la place.