line-break

Die CSS-Eigenschaft line-break definiert, wie streng Regeln für den Umbruch von Text auf neuen Zeilen durchgesetzt werden, insbesondere bei der Arbeit mit Symbolen und Satzzeichen in chinesischen, japanischen oder koreanischen (CJK) Schriftsystemen. Sie ist in der CSS Text Module Level 3 Spezifikation enthalten, die sich derzeit im Editor's Draft befindet.

.element {
  line-break: strict;
}

Demo

Syntax

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

• Initial: auto
• Gilt für: alle Elemente
• Vererbt: 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: Dies überlässt es dem Browser, zu entscheiden, wie er Zeilenumbrüche implementiert. Jeder Browser kann seine Kriterien basierend auf Faktoren wie der Zeilenlänge unterschiedlich festlegen.
• loose: Dies ist die geringste Durchsetzung von Zeilenumbruchregeln. Die Spezifikation nennt kurze Textzeilen, wie sie in einer Zeitung vorkommen könnten, als Beispiel, wo dieser Wert verwendet werden könnte.
• normal: Dies bricht Textzeilen basierend auf dem „häufigsten“ Regelsatz ab. (Beachten Sie, dass keine Definition darüber vorhanden ist, was der häufigste Regelsatz ist oder was er enthalten könnte.)
• strict: Dies erzwingt den strengsten Regelsatz für Zeilenumbrüche.
• anywhere: Dieser Wert ermöglicht Möglichkeiten für weiche Umbrüche, die es dem Text ermöglichen, an Leerzeichen oder Satzzeichen anstelle einer reinen Wortgrenze umgebrochen zu werden. Dies ist ideal für Sprachen, die keine Leerzeichen oder Satzzeichen zur Trennung von Wörtern verwenden. Die Spezifikation besagt, dass CSS keine Möglichkeiten für weiche Umbrüche definiert, und dieser Wert erkennt diese und nutzt sie, um Zeilenumbruchregeln anzuwenden. Die Spezifikation beschreibt das Textumbruchverhalten ähnlich dem, was wir typischerweise in einem Terminal sehen.

Die Spezifikation merkt auch an, dass der Wert anywhere es ermöglicht, beibehaltene Leerzeichen am Ende einer Zeile auf die nächste Zeile umzubrechen, wenn er mit der white-space-Eigenschaft auf break-spaces gesetzt ist.

Verhalten der Werte in verschiedenen Sprachen

Wie Sie sich vorstellen können, haben verschiedene Sprachen unterschiedliche Präferenzen, wenn es darum geht, wie Text auf neue Zeilen umgebrochen wird. Es gibt keine standardisierte Konvention, die von allen Sprachen verwendet wird. Dies überlässt es den Browsern, die „korrekten“ Regeln für eine bestimmte Sprache herauszufinden und zu befolgen. Die Spezifikation listet jedoch mehrere Anforderungen auf, um zu bestimmen, ob der Zeilenumbruch auf den verschiedenen Stufen der line-break-Strengenheit in bestimmten Situationen zulässig ist. Wir werden diese hier darstellen.

Situation	normal	locker	streng
Bricht vor kleinem japanischem Kana oder dem verlängerten Lautzeichen Katakana-Hiragana ab, d. h. Zeichen der Unicode-Zeilenumbruchklasse CJ	❌	✅	✅
Bricht vor bestimmten CJK-ähnlichen Bindestrichzeichen ab 〜 U+301C, ゠ U+30A0	❌	✅, wenn das Schriftsystem Chinesisch oder Japanisch ist	Erlaubt, wenn das Schriftsystem Chinesisch oder Japanisch ist
Bricht vor bestimmten CJK-ähnlichen Bindestrichzeichen ab 〜 U+301C, ゠ U+30A0	❌	✅, wenn das vorhergehende Zeichen zur Unicode-Zeilenumbruchklasse ID gehört (auch wenn das vorhergehende Zeichen aufgrund von word-break: break-all als ID behandelt wird)	❌
Bricht vor Iterationszeichen ab 々 U+3005, 〻 U+303B, ゝ U+309D, ゞ U+309E, ヽ U+30FD, ヾ U+30FE	❌	✅	❌
Bricht zwischen untrennbaren Zeichen ab (z. B. ‥ U+2025, … U+2026) d. h. Zeichen der Unicode-Zeilenumbruchklasse IN	❌	✅	❌
Bricht vor bestimmten zentrierten Satzzeichen ab ・ U+30FB, ： U+FF1A, ； U+FF1B, ･ U+FF65, ‼ U+203C, ⁇ U+2047, ⁈ U+2048, ⁉ U+2049, ！ U+FF01, ？ U+FF1F	❌	✅	❌
Bricht vor Suffixen ab Zeichen mit der Unicode-Zeilenumbruchklasse PO und der East Asian Width-Eigenschaft Ambiguous, Fullwidth oder Wide.	❌	✅	❌
Bricht nach Präfixen ab Zeichen mit der Unicode-Zeilenumbruchklasse PR und der East Asian Width-Eigenschaft Ambiguous, Fullwidth oder Wide.	❌	✅	❌

IE	Edge	Firefox	Chrome	Safari	Opera
6+	14+	69+	Alle	Alle	15+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
85+	Nein	81+	Alle	59+

Verwandte Eigenschaften