Propriété CSS line-break
La propriété line-break spécifie comment couper les lignes de texte chinois, japonais ou coréen (CJK) lors de l'utilisation de ponctuation et de symboles. Comme ces langues suivent des règles typographiques différentes, les sauts de ligne ne se produisent pas toujours aux endroits attendus. Par exemple, lorsqu'elle est définie sur strict, les sauts de ligne ne sont autorisés qu'à des points spécifiques, comme après certaines ponctuations, plutôt qu'avant les tirets ou des caractères arbitraires. La spécification CSS définit des règles spécifiquement pour le texte chinois, japonais et coréen (CJK).
| Valeur initiale | auto |
|---|---|
| S'applique à | Tous les éléments, mais uniquement sur les conteneurs de blocs. |
| Héritée | 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 | initial | inherit;Exemple de la propriété line-break :
Exemple de la propriété CSS line-break avec la valeur strict
<!DOCTYPE html>
<html>
<head>
<style>
.korean {
line-break: strict;
}
</style>
</head>
<body>
<h2>Exemple de la propriété line-break</h2>
<!--Be the change you want to see in the world.-->
<span class="korean">세상에서 보고싶은 변화가 있다면 당신 스스로 그 변화가 되어라.</span>
</body>
</html>Résultat
Exemple de la propriété line-break avec la valeur "normal" :
Exemple de la propriété CSS line-break avec la valeur normal
<!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>Exemple de la propriété line-break</h2>
<p>日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。</p>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| auto | Coupe le texte en utilisant la règle de saut de ligne par défaut. Il s'agit de la valeur initiale de la propriété. |
| normal | Coupe le texte en utilisant les règles de saut de ligne les moins restrictives. |
| loose | Coupe le texte en utilisant les règles de saut de ligne les plus courantes. |
| strict | Coupe le texte en utilisant les règles de saut de ligne les plus restrictives. |
| initial | Définit la propriété sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Parmi les méthodes suivantes, laquelle peut être utilisée pour insérer un saut de ligne en CSS ?