CSS line-break Eigenschaft
Die CSS-Eigenschaft line-break legt fest, wo Text umgebrochen wird. Definition, Werte und Beispiele.
Die CSS-Eigenschaft line-break steuert, wie Zeilen in chinesischem, japanischem und koreanischem (CJK) Text umgebrochen werden, wenn der Umbruch in der Nähe von Satzzeichen oder Symbolen erfolgt. CJK-Schriften umbrechen anders als lateinischer Text: Da es keine Leerzeichen zwischen Wörtern gibt, kann eine Zeile fast überall zwischen Zeichen umgebrochen werden. Der Knackpunkt ist, welche Zeichen am Anfang oder Ende einer Zeile stehen dürfen. Bestimmte Satzzeichen — wie das kleine Kana (ぁ, ゃ), Wiederholungszeichen oder schließende Klammern — sollten nicht am Anfang einer Zeile stehen, und line-break legt fest, wie streng der Browser diese Konventionen durchsetzt.
Diese Eigenschaft wirkt sich nur auf CJK-Text aus. Bei lateinischen, kyrillischen oder anderen durch Leerzeichen getrennten Schriften hat sie keine sichtbare Wirkung; dafür verwendet man üblicherweise word-break, overflow-wrap oder hyphens.
Wann verwenden?
Verwende line-break, wenn du CJK-Inhalte setzt und präzise Kontrolle darüber benötigst, wo Zeilen umbrechen:
strict— für formelle oder druckähnliche Layouts, bei denen du die striktesten, konservativsten Umbruchregeln wünschst.normal/loose— für schmale Spalten (mobile Bildschirme, Seitenleisten), bei denen ein Umbruch an mehr Stellen unschöne Überläufe verhindert.auto— lässt den Browser einen sinnvollen Standardwert wählen. Das ist der Wert, den du erhältst, wenn du die Eigenschaft nie setzt.
Wenn dein Text kein CJK-Text ist, hat diese Eigenschaft keine nützliche Wirkung — siehe die verwandten Eigenschaften oben.
| Anfangswert | auto |
|---|---|
| Gilt für | Alle Elemente, jedoch nur für Block-Container. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.lineBreak = "loose"; |
Syntax
Syntax der CSS-Eigenschaft line-break
line-break: auto | loose | normal | strict | anywhere | initial | inherit;Der Wert anywhere ist neuer und teilt dem Browser mit, dass ein Umbruch zwischen zwei beliebigen typografischen Zeichen erlaubt ist, auch vor und nach Satzzeichen — nützlich in sehr schmalen Containern mit fester Breite. Die Browser-Unterstützung für anywhere ist eingeschränkter als bei den anderen Schlüsselwörtern, also teste vor dem Einsatz.
Beispiele
Der Wert strict
Mit strict wendet der Browser die restriktivsten CJK-Zeilenumbruchregeln an und hält Satzzeichen an ihre benachbarten Zeichen gebunden.
<!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>Ergebnis
Der Wert normal
Mit normal verwendet der Browser die am wenigsten restriktiven Standardregeln, sodass derselbe Text an mehr Stellen umbrechen kann. Das ist praktisch, wenn eine Spalte schmal ist und strict zu Überläufen führen würde.
<!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>Werte
| Wert | Beschreibung |
|---|---|
| auto | Bricht den Text gemäß der Standard-Zeilenumbruchregel des Browsers um. Dies ist der Anfangswert der Eigenschaft. |
| loose | Verwendet die lockersten Zeilenumbruchregeln. Wird häufig für kurze Zeilen verwendet, etwa in zeitungsähnlichen Spalten. |
| normal | Verwendet die gängigsten Zeilenumbruchregeln. |
| strict | Verwendet die striktesten Zeilenumbruchregeln und hält Satzzeichen an benachbarte Zeichen gebunden. |
| anywhere | Ein Umbruch ist zwischen zwei beliebigen typografischen Zeichen erlaubt. Eingeschränkte Browser-Unterstützung. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Übernimmt den Eigenschaftswert vom übergeordneten Element. |
Browser-Unterstützung
Die Schlüsselwörter auto, loose, normal und strict werden von allen modernen Browsern unterstützt. Das Schlüsselwort anywhere ist neuer und noch nicht überall unterstützt; stelle daher einen Fallback bereit (zum Beispiel overflow-wrap: break-word), wenn du es verwendest.
Verwandte Eigenschaften
word-break— steuert, ob Wörter mitten im Wort umgebrochen werden können, auch für CJK- und Nicht-CJK-Text.overflow-wrap— ermöglicht das Umbrechen langer, nicht trennbarer Zeichenfolgen, um Überläufe zu verhindern.hyphens— fügt Silbentrennungen für Sprachen hinzu, die diese verwenden.white-space— steuert die Behandlung von Leerzeichen und Zeilenumbrüchen insgesamt.