CSS word-wrap-Eigenschaft
Die word-wrap-Eigenschaft bricht lange Wörter so, dass sie in ihren Container passen. Diese Eigenschaft ermöglicht das Umbruch von Wörtern, die sonst überlaufen würden.
Die Eigenschaft steuert, wie lange Wörter behandelt werden, wenn sie die Breite des Containers überschreiten. Sie akzeptiert keine positiven oder negativen Werte; diese gehören zur word-spacing-Eigenschaft. Bei Einstellung auf normal werden Wörter nur an erlaubten Umbruchstellen getrennt.
Die word-wrap-Eigenschaft ist eine der CSS3-Eigenschaften.
Sie wirkt nur, wenn die white-space-Eigenschaft das Umbruchverhalten zulässt.
INFO
In modernem CSS ist word-wrap ein Alias für die overflow-wrap-Eigenschaft.
| Anfangswert | normal |
|---|---|
| Anwendbar auf | 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 für die 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
Beispiel für die 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>Werte
| Wert | Beschreibung |
|---|---|
| normal | Trennt Wörter nur an erlaubten Umbruchstellen. Dies ist der Standardwert. |
| break-word | Erlaubt das Umbruch von nicht trennbaren Wörtern, wenn sie die Containerbreite überschreiten. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Welche Aussage zur CSS word-wrap-Eigenschaft ist korrekt?