CSS overflow-wrap Eigenschaft
Die CSS-Eigenschaft overflow-wrap legt fest, ob ein Zeilenumbruch im Zeilenfeld erfolgt. Beschreibung, Werte und Beispiele.
Die Eigenschaft overflow-wrap teilt dem Browser mit, ob er einen normalerweise nicht umbrechbaren String — ein langes Wort, eine URL oder einen Hash — an einer neuen Zeile umbrechen darf, damit der Text nicht aus seinem Container herausragt.
Normalerweise fügt CSS Zeilenumbrüche nur an „weichen Umbruchmöglichkeiten" wie Leerzeichen und Bindestrichen ein. Ein einzelner langer String ohne solche Zeichen (supercalifragilisticexpialidocious oder https://example.com/a/very/long/path) hat keine Stelle zum Umbrechen und läuft daher aus seiner Box heraus. Mit overflow-wrap können Sie als letztes Mittel einen Umbruch innerhalb dieses Strings erlauben.
Wann wird sie verwendet
Verwenden Sie overflow-wrap, wenn Inhalte vom Nutzer generiert oder unvorhersehbar sind — Kommentare, Suchanfragen, E-Mail-Adressen, Links, Code-Bezeichner. Genau diese Strings haben keine natürlichen Umbruchpunkte und können eine Spalte mit fester Breite, eine Karte oder ein Flex-Element sprengen. Eine gängige Schutzregel lautet:
.user-content {
overflow-wrap: break-word;
}Dies hält das Layout intakt, ohne normalen Text zu beeinflussen, da der Umbruch nur greift, wenn ein Wort sonst überlaufen würde.
Werte im Überblick
Die Eigenschaft overflow-wrap hat drei aussagekräftige Werte — normal, break-word und anywhere — sowie die universellen CSS-Schlüsselwörter initial und inherit.
normal— der Standardwert. Wörter brechen nur an normalen Stellen (Leerzeichen, Bindestriche) um. Ein zu langes Wort läuft über.break-word— ein langes Wort bricht nur dann an einer beliebigen Stelle um, wenn es sonst überlaufen würde. Entscheidend ist, dass dies die minimale intrinsische Breite des Elements nicht verringert, sodass das restliche Layout selten beeinträchtigt wird.anywhere— wiebreak-word, aber die Umbruchmöglichkeit wird berücksichtigt, wenn der Browser die minimale Inhaltsgröße des Elements berechnet, sodass ein Flex- oder Grid-Element schmaler werden kann als sein längstes Wort.
overflow-wrap ist der standardisierte Name für die ältere Eigenschaft word-wrap. word-wrap wird aus Gründen der Abwärtskompatibilität als Alias beibehalten — beide akzeptieren dieselben Werte und verhalten sich identisch. Verwenden Sie in neuem Code overflow-wrap.
Overflow-wrap vs word-break
overflow-wrap und word-break beeinflussen beide, wo Zeilen umbrochen werden können, beantworten aber unterschiedliche Fragen.
overflow-wrapbricht ein Wort nur als letztes Mittel, wenn es sonst überlaufen würde, unabhängig von der Sprache.word-breaksteuert Umbrüche proaktiv. Es ist hauptsächlich für CJK-Sprachen (Chinesisch, Japanisch, Koreanisch) konzipiert, bei denen Umbrüche zwischen Zeichen normal sind; der Wertbreak-allbricht lateinische Wörter mitten im Zeichen um, selbst wenn sie in die Zeile gepasst hätten.
Faustregel: Verwenden Sie overflow-wrap: break-word, um Überlauf zu verhindern, ohne den normalen Umbruch zu verändern; verwenden Sie word-break: break-all nur, wenn Sie wirklich aggressives zeichenweises Umbrechen wünschen.
Um Wörter an sinnvollen Silbengrenzen mit einem Bindestrich zu trennen, lesen Sie die Eigenschaft hyphens; für die allgemeine Steuerung von Leerzeichen und Umbrüchen lesen Sie white-space.
Eigenschaftszusammenfassung
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.overflowWrap = "normal"; |
Syntax
CSS overflow-wrap Syntax
overflow-wrap: normal | anywhere | break-word | initial | inherit;Die Reihenfolge der Schlüsselwortwerte ist bei Kurzschreibweise-Deklarationen relevant, aber für overflow-wrap legt man einfach einen Wert auf einmal fest.
Beispiel der overflow-wrap-Eigenschaft
Jeder Absatz unten ist auf 200px begrenzt. Der lange dummydummy…-String enthält keine Leerzeichen; unter normal läuft er über, während break-word und anywhere ihn zum Umbrechen innerhalb der Box zwingen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 200px;
margin: 3px;
background: #ccc;
}
.anywhere {
overflow-wrap: anywhere;
}
.break-word {
overflow-wrap: break-word;
}
.normal {
overflow-wrap: normal;
}
</style>
</head>
<body>
<h2>Overflow-wrap property example</h2>
<h3>Overflow-wrap: normal</h3>
<p>Lorem Ipsum has been the industry's standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: anywhere</h3>
<p>Lorem Ipsum has been the industry's standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: break-word</h3>
<p>Lorem Ipsum has been the industry's standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| normal | Zeilen brechen nur nach normalen Zeilenumbruchregeln um. Wörter brechen nicht um, auch wenn sie den Container überlaufen. Dies ist der Standardwert dieser Eigenschaft. |
| anywhere | Lange Wörter oder URLs brechen an beliebiger Stelle um, wenn es keine anderweitig akzeptablen Umbruchpunkte in der Zeile gibt. Trennzeichen gelten nicht als akzeptable Umbruchpunkte, selbst wenn die Eigenschaft hyphens gesetzt ist. |
| break-word | Lange Wörter oder Strings, die nicht in ihren Container passen, brechen an einer beliebigen Stelle um, um einen Zeilenumbruch zu erzwingen. Weiche Umbruchmöglichkeiten werden bei der Berechnung der minimalen Inhaltsgröße des Elements nicht berücksichtigt. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |