CSS word-wrap Eigenschaft
Mit der CSS word-wrap-Eigenschaft lassen sich auch nicht trennbare Wörter umbrechen, damit sie in den Container passen. Werte und Beispiele.
Die Eigenschaft word-wrap bricht lange, andernfalls nicht trennbare Wörter so um, dass sie in ihren Container passen, anstatt über dessen Rand hinauszuragen.
Normalerweise bricht ein Browser Text nur an „weichen Umbruchmöglichkeiten" — Leerzeichen, Bindestrichen und ähnlichen Zeichen. Eine einzelne lange Zeichenfolge ohne solche Möglichkeit (eine URL, ein Hash, ein chemischer Name, eine lange ID) hat keinen Punkt, an dem sie umgebrochen werden kann, und läuft daher aus einem schmalen Kasten heraus, was das Layout zerstören kann. word-wrap erlaubt dem Browser, innerhalb eines solchen Wortes als letzten Ausweg zu trennen.
Wann man es verwendet
Greifen Sie auf word-wrap zurück, wenn benutzergenerierter oder unvorhersehbarer Text länger als sein Container sein kann:
- URLs und Dateipfade, die in einer Karte oder Seitenleiste mit fester Breite angezeigt werden.
- E-Mail-Adressen, Benutzernamen oder Tokens in einer schmalen Spalte.
- Lange, zusammenhängende Zeichenfolgen in Tabellen, Chat-Blasen oder Kommentarbereichen.
- Jedes responsive Layout, bei dem nicht garantiert werden kann, wo Text umbricht.
Die Eigenschaft ist nur bei Wörtern relevant, die sonst nicht umbrechen können. Normaler Fließtext bricht bereits an Leerzeichen um, sodass die Eigenschaft dort keine sichtbare Auswirkung hat.
word-wrap vs. overflow-wrap
word-wrap ist der ursprüngliche Microsoft-Name für das, was die CSS-Spezifikation später als overflow-wrap standardisiert hat. Die beiden sind Aliase — sie tun exakt dasselbe und akzeptieren dieselben Werte. Browser bilden word-wrap intern auf overflow-wrap ab.
Verwenden Sie overflow-wrap in neuem Code für Standardkonformität; behalten Sie word-wrap, wenn Sie sehr alte Browser unterstützen müssen, da manche veralteten Engines nur den älteren Namen erkennen.
Verwechseln Sie word-wrap nicht mit word-break. word-wrap/overflow-wrap bricht ein Wort nur dann, wenn es andernfalls überlaufen würde — normale Wörter bleiben intakt. word-break: break-all ist aggressiver: Es bricht Wörter an jedem Zeichen, selbst wenn sie passen würden. Wählen Sie word-wrap, wenn Sie einen sauberen Umbruch wollen, der nur in Notfällen greift.
word-wrap ist eine der CSS3-Eigenschaften und wirkt sich nur aus, wenn die Eigenschaft white-space Zeilenumbrüche erlaubt (zum Beispiel hat sie unter white-space: nowrap keine Wirkung).
| Initialwert | normal |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.wordWrap = "break-word"; |
Syntax
CSS word-wrap Werte
word-wrap: normal | break-word | initial | inherit;Beispiel der word-wrap-Eigenschaft mit dem Wert "normal":
CSS word-wrap Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 120px;
border: 1px solid #666;
word-wrap: normal;
}
</style>
</head>
<body>
<h2>Word-wrap property example</h2>
<div>
Lorem Ipsum is
<strong>simplysimplysimplysimplysimplysimply</strong>
dummy text of the printing and typesetting
<strong>industryindustryindustryindustryindustry</strong>.
</div>
</body>
</html>Ergebnis
Mit normal haben die langen Zeichenfolgen simply... und industry... keine Umbruchmöglichkeit, sodass sie über den 120px-Kasten hinausragen.
Beispiel der word-wrap-Eigenschaft mit dem Wert "break-word":
CSS word-wrap break-word Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 120px;
border: 1px solid #666;
word-wrap: break-word;
}
</style>
</head>
<body>
<h2>Word-wrap property example</h2>
<div>
Lorem Ipsum is
<strong>simplysimplysimplysimplysimplysimply</strong>
dummy text of the printing and typesetting
<strong>industryindustryindustryindustryindustry</strong>.
</div>
</body>
</html>Mit break-word kann der Browser diese langen Zeichenfolgen mitten im Wort an der Boxkante trennen, sodass der Inhalt ordentlich innerhalb des 120px-Containers bleibt.
Werte
| Wert | Beschreibung |
|---|---|
| normal | Bricht Wörter nur an erlaubten Umbruchpunkten. Dies ist der Standardwert. |
| break-word | Erlaubt das Trennen nicht trennbarer Wörter, wenn sie die Container-Breite überschreiten. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
- overflow-wrap — der standardisierte Name für dasselbe Verhalten; bevorzugen Sie ihn in neuem Code.
- word-break — aggressiveres Trennen, das Wörter auch dann aufbrechen kann, wenn sie passen würden.
- white-space — steuert, ob Text überhaupt umbricht;
word-wrapgilt nur, wenn Umbrüche erlaubt sind. - word-spacing — passt den Abstand zwischen Wörtern an (hat nichts mit dem Trennen zu tun, ist aber namentlich leicht zu verwechseln).