Ü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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
overflow-wrap | Chrome
Vollständige Unterstützung
23
| Edge
Vollständige Unterstützung
18
| Firefox
Vollständige Unterstützung
49
| IE
Vollständige Unterstützung
5.5
| Opera
Vollständige Unterstützung
12.1
| Safari
Vollständige Unterstützung
6.1
| WebView Android
Vollständige Unterstützung
4.4
| Chrome Android
Vollständige Unterstützung
25
| Firefox Android
Vollständige Unterstützung
49
| Opera Android
Vollständige Unterstützung
12.1
| Safari iOS
Vollständige Unterstützung
7
| Samsung Internet Android Vollständige Unterstützung 4.0 |
anywhere | Chrome Keine Unterstützung Nein | Edge Keine Unterstützung Nein | Firefox Vollständige Unterstützung 65 | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Firefox Android Vollständige Unterstützung 65 | Opera Android ? | Safari iOS Keine Unterstützung Nein | Samsung Internet Android ? |
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 4.0 |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
- Kompatibilität unbekannt
- Kompatibilität unbekannt
- Verwendet einen nicht standardisierten Namen.
- Verwendet einen nicht standardisierten Namen.