CSS-Eigenschaft: overflow-wrap, Kategorien: Textdarstellung (allgemein), Text (CSS 3)
Umgang mit Wortüberhang
Steuert, ob ein zu langes Wort umgebrochen wird oder nicht.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Umgang mit Wortüberhang |
| normal |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text (CSS 3):
- hanging-punctuation
- hyphens
- letter-spacing
- line-break
- line-height
- line-stacking
- line-stacking-ruby
- line-stacking-shift
- line-stacking-strategy
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- overflow-style
- Aktuelle Seite: overflow-wrap
- tab-size
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-height
- text-indent
- text-justify
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- white-space
- word-break
- word-spacing
- word-wrap
Folgendes ist beim Einsatz von overflow-wrap zu beachten:
Per Default wird ein zu langes Wort "überhängend" dargestellt, wenn es breiter
als der verfügbare Platz ist. Sprich: es fließt über die Grenzen einer Box hinaus.
Dieses Verhalten entspricht dem Standardwert normal für overflow-wrap.
Der Parameter break-word bewirkt, dass ein zu langes Wort innerhalb der verfügbaren Breite
umgebrochen wird. Dabei ist die Trennstelle willkürlich, es werden keine orthografischen Regeln einer Sprache
berücksichtigt. Ebenfalls wird kein Trennungszeichen erzeugt,
das Wort wird einfach in der nächsten Zeile fortgesetzt.
Die CSS 3-Eigenschaft hyphens mit dem Wert auto
bewirkt ebenfalls eine Worttrennung bei zu langen Worten. Allerdings werden bei hyphens
orthografische Regeln einer Sprache berücksichtigt sowie automatisch
Trennzeichen einfügt, was zu einer sprachlich korrekten Trennung führt. Auch wenn hyphens nur mit den verschiedenen Vendor-Präfixen
unterstützt wird, ist es sinnvoll, hyphens statt overflow-wrap zu verwenden
oder beide Eigenschaften zu kombinieren.
overflow-wrap ist identisch zu word-wrap.
Es wurde Anfang 2012 als Alias definiert. Obwohl word-wrap ebenfalls neu im CSS 3-Standard ist,
wird word-wrap von allen Browsern unterstützt, auch von alten IE-Versionen.
overflow-wrap hingegen wird aktuell (März 2013) lediglich von Google Chrome und Opera unterstützt.
Die CSS-Eigenschaft word-wrap ist von daher vorzuziehen.
Der Parameter hyphenate war für overflow-wrap vorgesehen.
Da dieser Wert als "zu wenig stabil" eingestuft wurde, wurde hyphenate aus dem CSS 3-Standard
entfernt und ist für die Version 4 von CSS vorgemerkt.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||
Weiterführende Informationen zu overflow-wrap:
- W3C Spezifikation:
http://www.w3.org/TR/css3-text/#word-wrap - Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/CSS/overflow-wrap
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
overflow-style - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
overflow-x
Beispiele
HTML:
<div id="example-1">
<p>Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.</p>
</div>CSS:
/* Das DIV wird auf 100px Breite gesetzt. Diese CSS-Regel wirkt auf alle Beispiele */
div {
border: 4px solid #cccccc;
padding: 0px 10px;
width: 100px;
}
/* Browser-Standardverhalten: Lange Worte überfließen eine Box, wenn es nicht in die Box passt. */
Beispiel Nr. 1 So sieht's aus:
Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.
HTML:
<div id="example-2">
<p>Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.</p>
</div>CSS:
#example-2 {
overflow-wrap: break-word;
}
/* Über den Wert break-word werden Umbrüche erzwungen, sodass lange Worte sich der Breite anpassen. Regeln der Worttrennung spielen hier keine Rolle. */Beispiel Nr. 2 So sieht's aus:
Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.
HTML:
<div id="example-3">
<p>Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und <span>Problembärerfindervorname</span> sowie Problembärerfindernachname sind natürlich selten genutzte Worte.</p>
</div>CSS:
#example-3 {
overflow-wrap: break-word;
}
#example-3 span {
overflow-wrap: normal;
color: red;
}
/* Über den Wert normal wird ein erzwungener Umbruch wieder aufgelöst. */Beispiel Nr. 3 So sieht's aus:
Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.
HTML:
<div id="testcase-vendor">
<p>Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.</p>
</div>CSS:
#testcase-vendor {
-moz-overflow-wrap: break-word;
-webkit-overflow-wrap: break-word;
-o-overflow-wrap: break-word;
-ms-overflow-wrap: break-word;
}Testbeispiel: Schreibweise mit
Vendor-Präfix
Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.
HTML:
<div id="testcase-standard">
<p>Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.</p>
</div>CSS:
#testcase-standard {
overflow-wrap: break-word;
}Testbeispiel: Standardschreibweise
Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!