line-break
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2020.
La propriété CSS line-break définit la façon de couper les lignes de texte chinois, japonais ou coréen (CJK) lors du traitement de la ponctuation et des symboles.
Exemple interactif
line-break: auto;
line-break: anywhere;
line-break: normal;
line-break: loose;
<section id="default-example">
<p id="example-element">
この喫茶店は、いつでもコーヒーの香りを漂わせています。<br />彼女はこの喫茶店で働いて、着々と実力をつけていきました。<br />今では知る人ぞ知る、名人です。
</p>
</section>
#example-element {
font-family: "Yu Gothic", "YuGothic", "Meiryo", "ＭＳ ゴシック", sans-serif;
border: 2px dashed #999999;
text-align: left;
width: 240px;
font-size: 16px;
}
Syntaxe
/* Valeurs avec un mot-clé */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
/* Valeurs globales */
line-break: inherit;
line-break: initial;
line-break: revert;
line-break: revert-layer;
line-break: unset;
Valeurs
auto-
Coupe le texte en utilisant la règle de saut de ligne par défaut.
loose-
Coupe le texte en utilisant la règle de saut de ligne la moins restrictive. Généralement utilisé pour les lignes courtes, comme dans les journaux.
normal-
Coupe le texte en utilisant la règle de saut de ligne la plus courante.
strict-
Coupe le texte en utilisant la règle de saut de ligne la plus stricte.
anywhere-
Il y a une opportunité de retour à la ligne souple autour de chaque unité de caractère typographique, y compris autour de tout caractère de ponctuation ou espace conservé, ou au milieu des mots, sans tenir compte d'aucune interdiction de saut de ligne, même celles introduites par des caractères de classe GL, WJ ou ZWJ ou imposées par la propriété
word-break. Les différentes opportunités de retour à la ligne ne doivent pas être hiérarchisées. La césure n'est pas appliquée.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
line-break =
auto |
loose |
normal |
strict |
anywhere
Exemples
Définir le retour à la ligne du texte
Vérifiez si le texte est coupé avant « 々 », « ぁ » et « 。 ».
HTML
<div lang="ja">
<p class="wrap-box auto">
auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrap-box loose">
loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrap-box normal">
normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrap-box strict">
strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrap-box anywhere">
anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
</div>
CSS
.wrap-box {
width: 10em;
margin: 0.5em;
white-space: normal;
vertical-align: top;
display: inline-block;
}
.auto {
line-break: auto;
}
.loose {
line-break: loose;
}
.normal {
line-break: normal;
}
.strict {
line-break: strict;
}
.anywhere {
line-break: anywhere;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Text Module Level 3 # line-break-property |