word-wrap

Übersicht

Die word-wrap Eigenschaft wird verwendet, um anzugeben ob der Webbrowser Zeilenumbrüche innerhalb von Wörtern machen darf. Dies ist nötig um einem Overflow vorzubeugen, wenn ein sonst nicht trennbarer Text zu lang für die beinhaltende Box wäre.

Hinweis: Die ursprünglich (unprefixed) proprietäre Erweiterung word-wrap von Microsoft wurde im aktuellen Entwurf der CSS3 Text Spezifikation in overflow-wrap umbenannt. word-wrap wird jetzt als "alternativer Name" für overflow-wrap angesehen. Stabile Builds von Google Chrome und Opera unterstützen die neue Syntax.

Initialwert	`normal`
Anwendbar auf	nicht ersetzte Inlineelemente
Vererbt	Ja
Medien	visuell
Berechneter Wert	wie angegeben
Animationstyp	diskret
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Keyword values */
word-wrap: normal;
word-wrap: break-word;

/* Global values */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;

Werte

normal: Zeilen dürfen nur bei normal Trennstellen von Wörtern umbrechen.
break-word: Normalerweise nicht trennbare Wörter dürfen an beliebigen Stellen getrennt werden, wenn es sonst keine anwendbaren Trennstellen in der Zeile gibt.

Formale Syntax

normal | break-word

Beispiele

p { width: 13em; background: gold; }

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

p { width: 13em; background: gold; word-wrap: break-word; }

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

Spezifikationen

Spezifikation	Status	Bemerkung
CSS Text Module Level 3 Die Definition von 'word-wrap' in dieser Spezifikation.	Arbeitsentwurf	Initiale Definition

Webbrowserkompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`overflow-wrap`	Chrome Vollständige Unterstützung 23 Vollständige Unterstützung 23 Vollständige Unterstützung 1 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	Edge Vollständige Unterstützung 18 Vollständige Unterstützung 18 Vollständige Unterstützung 12 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	Firefox Vollständige Unterstützung 49 Vollständige Unterstützung 49 Vollständige Unterstützung 3.5 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	IE Vollständige Unterstützung 5.5 Alternativer Name Vollständige Unterstützung 5.5 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	Opera Vollständige Unterstützung 12.1 Vollständige Unterstützung 12.1 Vollständige Unterstützung 10.5 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	Safari Vollständige Unterstützung 6.1 Vollständige Unterstützung 6.1 Vollständige Unterstützung 1 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	WebView Android Vollständige Unterstützung 4.4 Vollständige Unterstützung 4.4 Vollständige Unterstützung 1 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	Chrome Android Vollständige Unterstützung 25 Vollständige Unterstützung 25 Vollständige Unterstützung 18 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	Firefox Android Vollständige Unterstützung 49 Vollständige Unterstützung 49 Vollständige Unterstützung 4 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	Opera Android Vollständige Unterstützung 12.1 Vollständige Unterstützung 12.1 Vollständige Unterstützung 11 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	Safari iOS Vollständige Unterstützung 7 Vollständige Unterstützung 7 Vollständige Unterstützung 1 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`	Samsung Internet Android Vollständige Unterstützung 1.5 Vollständige Unterstützung 1.5 Vollständige Unterstützung 1.0 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `word-wrap`
`anywhere`	Chrome Vollständige Unterstützung 80	Edge Vollständige Unterstützung 80	Firefox Vollständige Unterstützung 65	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 67	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 80	Chrome Android Vollständige Unterstützung 80	Firefox Android Vollständige Unterstützung 65	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`break-word`	Chrome Vollständige Unterstützung 1	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 3.5	IE Vollständige Unterstützung 5.5	Opera Vollständige Unterstützung 10.5	Safari Vollständige Unterstützung 1	WebView Android Vollständige Unterstützung ≤37	Chrome Android Vollständige Unterstützung 18	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung 11	Safari iOS Vollständige Unterstützung 1	Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Verwendet einen nicht standardisierten Namen.: Verwendet einen nicht standardisierten Namen.

Siehe auch

word-break