CSS - Césures
La propriété hyphens
La propriété CSS hyphens est utilisée pour contrôler la manière dont les mots doivent être coupés lorsque le texte s'étend sur plusieurs lignes. Elle indique au navigateur si et comment couper les mots lors du retour à la ligne du contenu textuel. La propriété hyphens accepte trois valeurs possibles : none, manual et auto.
La valeur par défaut de la propriété hyphens est manual, ce qui signifie que les mots ne seront coupés aux sauts de ligne que lorsqu'il y a des caractères à l'intérieur du mot qui suggèrent des opportunités de coupure, tels que les traits d'union (-), les tirets demi-cadratin (–), les tirets cadratin (—) ou les traits d'union conditionnels (­). Si la propriété hyphens est définie sur none, les mots ne sont pas coupés aux sauts de ligne, même si des caractères à l'intérieur du mot suggèrent des opportunités de coupure. Si la propriété hyphens est définie sur auto, le navigateur peut automatiquement couper les mots aux points de césure appropriés, en suivant ses propres règles.
La propriété hyphens est héritée, ce qui signifie que si elle est définie sur un élément parent, elle s'appliquera à tous les éléments enfants, sauf si elle est remplacée par une règle plus spécifique.
La valeur none
Lorsque la propriété hyphens est définie sur none, les mots ne sont pas coupés aux sauts de ligne, même si des caractères à l'intérieur du mot suggèrent des opportunités de coupure. Cela signifie que si un mot est trop long pour tenir sur la ligne actuelle, il débordera ou sera déplacé à la ligne suivante au lieu d'être coupé.
Conseil: Utilisation de la valeur none
p {
hyphens: none;
}Dans cet extrait de code, vous définissez les éléments <p> pour ne permettre aucune césure, même s'il y a des caractères à l'intérieur suggérant le contraire.
La valeur 'manual'
Lorsque vous utilisez cette valeur pour 'hyphens', les mots ne seront coupés qu'aux endroits où il y a des caractères suggérant des coupures possibles, comme les traits d'union réguliers ou conditionnels (paramètre par défaut).
Conseil: Utilisation de la valeur manual
p {
hyphens: manual;
}Ce code configure les éléments <p> pour qu'ils n'autorisent que la coupure manuelle basée sur le placement de caractères spéciaux à l'intérieur.
La valeur 'auto'
Lorsque vous utilisez cette valeur pour 'hyphens', les navigateurs peuvent automatiquement trouver des endroits appropriés pour chaque instance individuelle.
Contrôle de la césure
En plus de la propriété hyphens, CSS offre d'autres propriétés qui vous permettent de contrôler le comportement de la césure dans vos pages web.
La propriété hyphenate-character vous permet de spécifier le caractère utilisé lors de la césure des mots. Par défaut, le tiret (-) est utilisé, mais vous pouvez le remplacer par n'importe quel autre caractère si vous le souhaitez.
Conseil: Caractère de césure
p {
hyphens: auto;
hyphenate-character: '=';
}La propriété hyphenate-limit-chars vous permet de spécifier le nombre minimum de caractères qui doivent être présents avant et après un point de césure. Elle prend une à trois valeurs entières, représentant le nombre minimum de caractères avant le point de césure, après le point de césure, et la longueur minimale du mot.
Conseil: Limite de caractères pour la césure
p {
hyphens: auto;
hyphenate-limit-chars: 5 3 8;
}La propriété hyphenate-limit-lines spécifie combien de lignes consécutives peuvent être coupées. Elle prend une valeur entière.
Conseil: Limite de lignes pour la césure
p {
hyphens: auto;
hypernate-limit-lines: 2;
}La propriété hyphenate-limit-zone définit la quantité d'espace non rempli (appelée "zone de césure") qui peut être laissée à la fin d'une ligne avant que la césure ne soit déclenchée. Elle prend une valeur de longueur.
Conseil: Zone limite de césure
p {
hyphens: auto;
hyphenate-limit-zone: 8em;
}Ce code définit la zone de césure maximale à la fin de la ligne à 8em pour les éléments <p>.