Die Eigenschaft overflow-wrap definiert, ob der Browser Zeilen innerhalb einer unzerbrechlichen Zeichenkette trennen kann, um ein Überlaufen von Inhalten zu verhindern.
Die Eigenschaft overflow-wrap hat drei Werte: normal, anywhere und break-word.
Der Name von overflow-wrap der Standardname für die Eigenschaft word-wrap.
| Anfangswert | normal |
| Gilt für | Alle Elemente |
| Geerbt | Ja |
| Animierbar | Nein |
| Version | CSS3 |
| DOM Syntax | object.style.overflowWrap = "normal"; |
Syntax
overflow-wrap: normal | anywhere | break-word | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
p {
width: 200px;
margin: 3px;
background: #ccc;
}
.anywhere {
overflow-wrap: anywhere;
}
.break-word {
overflow-wrap: break-word;
}
.normal {
overflow-wrap: normal;
}
.auto {
overflow-wrap: auto;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft overflow-wrap</h2>
<h3>Overflow-wrap: normal</h3>
<p>Seit 1500 Jahren ist Lorem Ipsum der
Standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> Text der Branche...
</p>
<h3>Overflow-wrap: anywhere</h3>
<p>Seit 1500 Jahren ist Lorem Ipsum der
Standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> Text der Branche...
</p>
<h3>Overflow-wrap: break-word</h3>
<p>Seit 1500 Jahren ist Lorem Ipsum der
Standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> Text der Branche...
</p>
<h3>Overflow-wrap: auto</h3>
<p>Seit 1500 Jahren ist Lorem Ipsum der
Standard <em class="auto">dummydummydummydummydummydummydummydummy</em>
Text der Branche...
</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| normal | Die Linien werden nur nach den normalen Regeln des Linienbruchs unterbrochen. Die Wörter brechen nicht, auch wenn der Container überläuft. Das ist der Standardwert dieser Eigenschaft. |
| anywhere | Lange Wörter oder URLs werden zu irgendeinem Zeitpunkt brechen, wenn es keine sonst akzeptablen Haltepunkte in der Zeile gibt. Die Silbentrennung wird auch bei Verwendung der Bindestricheigenschaft nicht unterbrochen. |
| break-word | Lange Wörter oder Zeichenketten, die nicht in ihren Container passen, brechen an einer beliebigen Stelle, um einen Zeilenumbruch zu erzwingen, aber Soft-Wrap-Möglichkeiten, die durch den Wortbruch eingeführt werden, werden bei der Berechnung von Eigengrößen mit geringem Inhalt nicht berücksichtigt. |
| initial | Der Wert stellt die Eigenschaft auf seinen Standardwert ein. |
| inherit | Der Wert erbt die Eigenschaft von seinem übergeordneten Element. |
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| 23.0+ | 18.0+ | 49.0+ | 6.1+ | 12.1+ |
Übe dein Wissen
Welche der folgenden Aussagen sind korrekt gemäß der auf https://www.w3docs.com/css-lernen/css-eigenschaft-overflow-wrap.html beschriebenen CSS-Eigenschaft 'overflow-wrap'?
Richtig!
Falsch!