Zeilenumbruch - CSS-Tricks | CSS-Almanach 2025

Die CSS- line-breakEigenschaft definiert, wie streng Regeln für das Umbrechen von Text in neue Zeilen durchgesetzt werden sollen, insbesondere wenn mit Symbolen und Interpunktionen in chinesischen, japanischen oder koreanischen (CJK) Schriftsystemen gearbeitet wird. Es ist in der CSS Text Module Level 3-Spezifikation enthalten, die derzeit im Editor's Draft enthalten ist.

.element ( line-break: strict; )

Demo

Syntax

line-break: auto | loose | normal | strict | anywhere;

Initiale: auto
Gilt für: alle Elemente
Geerbt: ja
Berechneter Wert: wie angegeben
Animationstyp: diskret

Werte

/* 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: unset;

auto: Damit kann der Browser entscheiden, wie Zeilenumbrüche implementiert werden. Jeder Browser kann sich in seinen Kriterien aufgrund von Faktoren, einschließlich der Zeilenlänge, unterscheiden.
loose: Dies ist die leichteste Durchsetzung von Zeilenumbruchregeln. Die Spezifikation nennt kurze Textzeilen, wie wir sie in einer Zeitung sehen könnten, als Beispiel, wo dieser Wert verwendet werden könnte.
normal: Dies unterbricht Textzeilen basierend auf den „häufigsten“ Regeln. (Beachten Sie, dass es keine Definition darüber gibt, welche Regeln am häufigsten verwendet werden oder was sie enthalten könnten.)
strict: Dies erzwingt die strengsten Regeln für Zeilenumbrüche.
anywhere: Dieser Wert ermöglicht Soft-Wrap-Möglichkeiten, bei denen Text anstelle der Wortgrenze nur an Leerzeichen oder Satzzeichen unterbrochen werden kann. Es ist ideal für Sprachen, die möglicherweise keine Leerzeichen oder Satzzeichen verwenden, um Wörter zu trennen. Die Spezifikation besagt, dass CSS keine Soft-Wrap-Opportunities definiert, und dieser Wert erkennt und nutzt sie, um Zeilenumbruchregeln anzuwenden. Die Spezifikation beschreibt das Verhalten beim Umbrechen von Text, wie wir es normalerweise in einem Terminal sehen.

In der Spezifikation wird außerdem darauf hingewiesen, dass der anywhereWert es ermöglicht, dass beibehaltene Leerzeichen am Ende einer Zeile in die nächste Zeile umgebrochen werden, wenn die white-spaceEigenschaft auf festgelegt wird break-spaces.

Werteverhalten in verschiedenen Sprachen

Wie Sie sich vorstellen können, haben verschiedene Sprachen unterschiedliche Vorlieben, wenn es darum geht, wie Text in neue Zeilen unterteilt wird. Es gibt keine standardisierte Konvention, die von allen Sprachen verwendet wird. Das überlässt es den Browsern, die „richtigen“ Regeln für eine bestimmte Sprache herauszufinden und zu befolgen. Die Spezifikation enthält jedoch mehrere Anforderungen, um zu bestimmen, ob line-breakin bestimmten Situationen ein Zeilenumbruch auf den verschiedenen Ebenen der Strenge zulässig ist . Wir werden diese hier vorstellen.

Situation	`normal`	`loose`	`strict`
Pausen vor dem japanischen kleinen Kana oder dem Katakana-Hiragana verlängerten die Klangmarke, dh den Charakter aus der Unicode-Klasse für Zeilenumbrüche `CJ`	❌	✅	✅
Bricht vor bestimmten CJK-Bindestrichen ab: 〜 U + 301C, ゠ U + 30A0	❌	✅ wenn das Schriftsystem chinesisch oder japanisch ist	Erlaubt, wenn das Schriftsystem chinesisch oder japanisch ist
Bricht vor bestimmten CJK-Bindestrichen ab: 〜 U + 301C, ゠ U + 30A0	❌	✅ wenn das vorhergehende Zeichen zur Unicode-Zeilenumbruchklasse gehört `ID`(auch wenn das vorhergehende Zeichen als `ID`fällig behandelt wird`word-break: break-all)`	❌
Unterbrechungen vor Iterationsmarkierungen: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Unterbrechungen zwischen untrennbaren Zeichen (z. B. ‥ U + 2025,… U + 2026), dh Zeichen aus der Unicode-Klasse für Zeilenumbrüche `IN`	❌	✅	❌
Unterbrechungen vor bestimmten zentrierten Satzzeichen: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Breaks vor Suffixen: Zeichen mit der Unicode - Zeilenumbruch - Klasse `PO`und der ostasiatischen Width - Eigenschaft `Ambiguous`, `Fullwidth`oder `Wide`.	❌	✅	❌
Breaks nach Präfixen: Zeichen mit der Unicode - Zeilenumbruch - Klasse `PR`und der ostasiatischen Width - Eigenschaft `Ambiguous`, `Fullwidth`oder `Wide`.	❌	✅	❌