CSS/Eigenschaften/overflow-wrap

Browserunterstützung
caniuse.com

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 &shy (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 und revert

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