line-break CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.
Die line-break CSS-Eigenschaft legt fest, wie Zeilen von chinesischem, japanischem oder koreanischem (CJK) Text in Bezug auf Satzzeichen und Symbole gebrochen werden.
Probieren Sie es aus
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;
}
Syntax
/* 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: revert;
line-break: revert-layer;
line-break: unset;
Werte
auto-
Bricht den Text unter Verwendung der Standardumbruchregeln.
loose-
Bricht den Text unter Verwendung der am wenigsten restriktiven Umbruchregeln. Typischerweise verwendet für kurze Zeilen, wie in Zeitungen.
normal-
Bricht den Text unter Verwendung der am häufigsten verwendeten Umbruchregeln.
strict-
Bricht den Text unter Verwendung der strengsten Umbruchregeln.
anywhere-
Es besteht eine weiche Umbruchmöglichkeit um jede typographische Zeicheneinheit, einschließlich um jedes Satzzeichen oder erhaltene Leerzeichen, oder in der Mitte von Wörtern, ohne Rücksicht auf jegliches Verbot gegen Zeilenumbrüche, selbst die, die durch Zeichenklassen mit GL, WJ, oder ZWJ eingeführt wurden oder durch die
word-break-Eigenschaft vorgeschrieben sind. Die unterschiedlichen Umbruchmöglichkeiten dürfen nicht priorisiert werden. Silbentrennung wird nicht angewandt.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
line-break =
auto |
loose |
normal |
strict |
anywhere
Beispiele
Festlegen des Textumbruchs
Prüfen Sie, ob der Text vor "々", "ぁ" und "。" umbrochen wird.
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;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Text Module Level 3 # line-break-property |
Browser-Kompatibilität
Siehe auch
- CSS und internationaler Text auf W3C