CSS/Eigenschaften/overflow-wrap
Aus SELFHTML-Wiki
CSS | Eigenschaften
Die Eigenschaft overflow-wrap eröffnet für den Fall, dass keine anderen Umbruchmöglichkeiten erlaubt sind, das Aufbrechen von Wörtern, die mehr Breite (genauer: Inline-Größe) benötigen als das HTML Element zur Verfügung stellt. Sie war als word-wrap eine proprietäre MS-Eigenschaft, die unter dem Namen overflow-wrap in den CSS3-Entwurf übernommen wurde.
Andere Umbruchmöglichkeiten können sich durch die Werte von [word-break] oder [hyphens] ergeben, sowie durch die HTML-Entität ­ (soft hyphen).
- Erlaubte Werte
-
normal
: bricht Wörter nur an erlaubten Breakpoints um -
break-word
: erlaubt es, dass ein zu langes Wort (oder ein mittels oder Silbentrennung entstandener Wortteil) an der Stelle umgebrochen wird, an der es den verfügbaren Platz in seinem HTML-Elements überschreitet. Die intrinsische Minimalbreite des Wortes (die beispielsweise für die Ermittlung von min-content relevant ist, wird durch diese Umbruchmöglichkeit nicht verändert. -
anywhere
: (seit 2020) Wie break-word, aber die intrinsische Minimalbreite berücksichtigt die durch overflow-wrap eröffnete Umbruchmöglichkeit. Im Extremfall stehen dann nur noch ein bis zwei Buchstaben des Wortes auf einer Zeile.
-
- Vererbung steuernde Werte
inherit
,initial
,unset
undrevert
- Standardwert
normal
- anwendbar auf
alle Elemente
- Vererbung
nein
- animierbar
nein
Beispiel
p {
width: 10em;
word-wrap: normal;
overflow-wrap: break-word;
}
Ein normales Wort, das nicht mehr auf eine Zeile passt, wird in die Folgezeile gestellt. Wörter, die breiter als 10em sind, werden an dem Punkt, wo 10em überschritten werden, aufgetrennt.
Beachten Sie: Die Eigenschaft overflow-wrap bricht Wörter und Zahlen genau dann um, wenn die (festgelegte) Breite des Absatzes erreicht ist. Dabei wird keine Rücksicht auf Semantik oder Silbentrennung genommen.
Empfehlung: Verwenden Sie für die Silbentrennung in Texten die Eigenschaft hyphens.
Siehe auch
- Typografie/Textformatierung
- Textausrichtung (Silbentrennung und Zeilenumbrüche)
- word-break für generelle Umbruchsteuerung
- hyphens für automatische Silbentrennung
Weblinks
- Spezifikation (W3C): overflow-wrap property
- MDN: overflow-wrap
Liste der CSS-Eigenschaftem
- Positionierung und Anzeige
- Abstände
- Benutzeroberfläche
- Container
- generierter Inhalt
- Größenangaben
- Box-Ausrichtung
- Flexbox Layout
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Scroll Snap
- Rahmen und Schatten
- Schriftformatierung
- Textformatierung
- Textausrichtung
- Umbruchsteuerung
- Transformationen
- Animationen