Saut de ligne - Astuces CSS | CSS Almanach 2025

La line-breakpropriété CSS définit comment appliquer strictement les règles d'habillage de texte sur de nouvelles lignes, en particulier lorsque vous travaillez avec des symboles et des ponctuations dans les systèmes d'écriture chinois, japonais ou coréen (CJK). Il est inclus dans la spécification du module de texte CSS niveau 3, qui est actuellement dans le brouillon de l'éditeur.

.element ( line-break: strict; )

Démo

Syntaxe

line-break: auto | loose | normal | strict | anywhere;

Initiale: auto
S'applique à: tous les éléments
Héritée: oui
Valeur calculée: comme spécifié
Type d'animation: discret

Valeurs

/* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: unset;

auto: Cela permet au navigateur de décider comment il implémente les sauts de ligne. Chaque navigateur peut différer sur ses critères en fonction de facteurs, y compris la longueur de la ligne.
loose: Il s'agit de l'application la plus légère des règles de saut de ligne. La spécification cite de courtes lignes de texte, comme celles que nous pourrions voir dans un journal, comme exemple où cette valeur pourrait être utilisée.
normal: Cela coupe les lignes de texte en fonction de l'ensemble de règles «le plus courant». (Notez qu'aucune définition n'est fournie sur ce qu'est l'ensemble de règles le plus courant ou ce qu'il pourrait contenir.)
strict: Ceci applique l'ensemble de règles le plus strict pour les sauts de ligne.
anywhere: Cette valeur active les possibilités d'habillage souple, qui permettent au texte de se rompre au niveau des espaces ou de la ponctuation au lieu de la seule limite du mot. Il est idéal pour les langues qui n'utilisent pas d'espaces ou de ponctuation pour séparer les mots. La spécification indique que CSS ne définit pas les opportunités de soft wrap, et cette valeur les reconnaît et les exploite pour appliquer des règles de saut de ligne. La spécification décrit le comportement d'habillage de texte comme ce que nous voyons généralement dans un terminal.

La spécification note également que la anywherevaleur permet aux espaces blancs préservés à la fin d'une ligne de passer à la ligne suivante lorsqu'elle est utilisée avec la white-spacepropriété définie sur break-spaces.

Valoriser le comportement dans différentes langues

Comme vous pouvez l'imaginer, différentes langues ont des préférences différentes en ce qui concerne la façon dont le texte est divisé en nouvelles lignes. Il n'y a pas de convention normalisée utilisée par toutes les langues. Cela laisse aux navigateurs le soin de déterminer et de suivre les règles «correctes» pour une langue particulière. Mais la spécification décrit plusieurs exigences pour déterminer si le saut de ligne est autorisé aux différents niveaux de line-breakrigueur dans certaines situations. Nous les présenterons ici.

Situation	`normal`	`loose`	`strict`
Pauses avant le petit kana japonais ou la marque sonore prolongée Katakana-Hiragana, c'est-à-dire le caractère de la classe de rupture de ligne Unicode `CJ`	❌	✅	✅
Pauses avant certains caractères de type trait d'union CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ si le système d'écriture est chinois ou japonais	Autorisé, si le système d'écriture est chinois ou japonais
Pauses avant certains caractères de type trait d'union CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ si le caractère précédent appartient à la classe de rupture de ligne Unicode `ID`(y compris lorsque le caractère précédent est traité comme `ID`dû à`word-break: break-all)`	❌
Ruptures avant les marques d'itération: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Ruptures entre les caractères inséparables (tels que ‥ U + 2025,… U + 2026), c'est-à-dire les caractères de la classe de rupture de ligne Unicode `IN`	❌	✅	❌
Ruptures avant certains signes de ponctuation centrés: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Pauses avant: Suffixes Les personnages avec la classe de rupture de ligne Unicode `PO`et la propriété Asie de l' Est Largeur `Ambiguous`, `Fullwidth`ou `Wide`.	❌	✅	❌
Pauses après préfixes: Les personnages avec la classe de rupture de ligne Unicode `PR`et la propriété Asie de l' Est Largeur `Ambiguous`, `Fullwidth`ou `Wide`.	❌	✅	❌