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 gebrochen werden, wenn mit Satzzeichen und Symbolen gearbeitet wird.
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
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
auto-
Bricht den Text unter Verwendung der Standardzeilenumbruchsregel.
loose-
Bricht den Text unter Verwendung der am wenigsten restriktiven Zeilenumbruchsregel. Typischerweise für kurze Zeilen verwendet, wie in Zeitungen.
normal-
Bricht den Text unter Verwendung der gebräuchlichsten Zeilenumbruchsregel.
strict-
Bricht den Text unter Verwendung der strengsten Zeilenumbruchsregel.
anywhere-
Es gibt eine weiche Umbruchmöglichkeit um jede typografische Einheit, einschließlich um irgendwelche Satzzeichen oder beibehaltene Leerzeichen, oder in der Mitte von Wörtern, unabhängig von jeglichen Verboten gegen Zeilenumbrüche, sogar jene, die von Charakteren mit der GL-, WJ- oder ZWJ-Charakterklasse eingeführt wurden oder durch die
word-breakEigenschaft gefordert werden. Die unterschiedlichen Umbruchmöglichkeiten dürfen nicht priorisiert werden. Silbentrennung wird nicht angewendet.
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
Texteinpassung einstellen
Sehen 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 internationale Texte auf W3C