Propriété CSS line-break
Utilisez la propriété CSS line-break pour contrôler les sauts de ligne dans les textes CJK. Définition, valeurs et exemples.
La propriété CSS line-break contrôle la façon dont les lignes sont coupées dans les textes chinois, japonais et coréen (CJK) lorsque la coupure se produit à proximité d'une ponctuation ou de symboles. Les scripts CJK s'enroulent différemment du texte latin : il n'y a pas d'espaces entre les mots, donc une ligne peut se couper presque n'importe où entre les caractères. La contrainte réside dans le fait de déterminer quels caractères sont autorisés à commencer ou à terminer une ligne. Certaines marques de ponctuation — comme les petits kana (ぁ, ゃ), les marques d'itération ou les crochets fermants — ne doivent pas se retrouver isolées en début de ligne, et line-break détermine la rigueur avec laquelle le navigateur applique ces conventions.
Cette propriété n'affecte que le texte CJK. Elle n'a aucun effet visible sur le latin, le cyrillique ou les autres scripts séparés par des espaces ; pour ceux-ci, il vaut mieux utiliser word-break, overflow-wrap ou hyphens.
Quand l'utiliser
Recourez à line-break lorsque vous composez du contenu CJK et que vous avez besoin d'un contrôle précis sur les points de retour à la ligne :
strict— pour des mises en page formelles ou d'aspect imprimé, où vous souhaitez les règles de retour à la ligne les plus strictes et les plus conservatrices.normal/loose— pour les colonnes étroites (écrans mobiles, barres latérales) où autoriser plus de points de coupure évite les débordements disgracieux.auto— laissez le navigateur choisir une valeur par défaut raisonnable. C'est ce que vous obtenez si vous ne définissez jamais cette propriété.
Si votre texte n'est pas CJK, cette propriété ne sert à rien — consultez les propriétés connexes ci-dessus.
| Valeur initiale | auto |
|---|---|
| S'applique à | Tous les éléments, mais uniquement sur les conteneurs de bloc. |
| Héritage | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.lineBreak = "loose"; |
Syntaxe
Syntaxe de la propriété CSS line-break
line-break: auto | loose | normal | strict | anywhere | initial | inherit;La valeur anywhere est plus récente et indique au navigateur qu'un saut est autorisé entre n'importe quels deux caractères typographiques, y compris avant et après la ponctuation — utile dans des conteneurs très étroits à largeur fixe. La prise en charge navigateur de anywhere est plus limitée que celle des autres mots-clés, testez donc cette valeur avant de vous y fier.
Exemples
La valeur strict
Avec strict, le navigateur applique l'ensemble de règles CJK de saut de ligne le plus restrictif, maintenant la ponctuation liée à ses caractères voisins.
<!DOCTYPE html>
<html>
<head>
<style>
.korean {
line-break: strict;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<!--Be the change you want to see in the world.-->
<span class="korean">세상에서 보고싶은 변화가 있다면 당신 스스로 그 변화가 되어라.</span>
</body>
</html>Résultat
La valeur normal
Avec normal, le navigateur utilise les règles par défaut les moins restrictives, de sorte que le même texte peut se couper à davantage de points. Cela s'avère pratique quand une colonne est étroite et que strict forcerait un débordement.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 16px;
line-height: 24px;
line-break: normal;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<p>日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。</p>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| auto | Coupe le texte selon la règle de saut de ligne par défaut du navigateur. C'est la valeur initiale de la propriété. |
| loose | Utilise les règles de saut de ligne les plus souples. Couramment utilisé pour les lignes courtes, comme dans les colonnes de style journal. |
| normal | Utilise les règles de saut de ligne les plus courantes. |
| strict | Utilise les règles de saut de ligne les plus strictes, maintenant la ponctuation liée aux caractères voisins. |
| anywhere | Un saut est autorisé entre n'importe quels deux caractères typographiques. Support navigateur limité. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite de la valeur de la propriété de l'élément parent. |
Support des navigateurs
Les mots-clés auto, loose, normal et strict sont pris en charge par tous les navigateurs modernes. Le mot-clé anywhere est plus récent et n'est pas encore supporté partout ; prévoyez donc une solution de repli (par exemple overflow-wrap: break-word) lorsque vous l'utilisez.
Propriétés connexes
word-break— contrôle si les mots peuvent être coupés en milieu de mot, y compris pour les textes CJK et non-CJK.overflow-wrap— permet aux longues chaînes non sécables de se couper pour éviter le débordement.hyphens— ajoute la césure pour les langues qui l'utilisent.white-space— contrôle la gestion globale des espaces blancs et des retours à la ligne.