CSS-Eigenschaft: word-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
- 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
- Aktuelle Seite: word-wrap
Folgendes ist beim Einsatz von word-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 word-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 word-wrap zu verwenden
oder beide Eigenschaften zu kombinieren.
word-wrap ist identisch zu overflow-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.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Hinweis
word-wrap wurde
im Verlauf der Standard-Entstehung in overflow-wrap umbenannt.
Der W3C-Standard besagt allerdings, dass word-wrap nicht aus dem Standard entfällt, sondern alternativ zu overflow-wrap verwendet werden kann.
Weiterführende Informationen zu word-wrap:
- W3C Spezifikation:
http://www.w3.org/TR/css3-text/#word-wrap - Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/CSS/word-wrap
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
word-spacing - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
wrap
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.
*/
/* Hinweis zum IE6: Da der IE6 width wie min-width interpretiert, dehnen lange Worte Boxen soweit aus, bis das Wort hinein passt. */
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 {
word-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. */
/* Hinweis IE6: mit break-word hält der IE6 die definierte Breite des DIV ein. */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 {
word-wrap: break-word;
}
#example-3 span {
word-wrap: normal;
color: red;
}
/* Über den Wert normal wird ein erzwungener Umbruch wieder aufgelöst. */
/* Internet Explorer einschließlich Version 10 überschreiben den Wert word-wrap: normal nicht, Hier wird auch das Wort
"Problembärerfindervorname" umgebrochen, obwohl anders definiert. */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="example-4">
<p>Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und <span>Problembärerfindervorname</span> sowie Problembärerfindernachname sind natürlich selten genutzte Worte.</p>
</div>CSS:
#example-4 {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
/* In der Kombination mit hyphens kommt es zu besseren Ergebnissen. Insofern
hyphens vom Browser unterstützt wird, werden Regeln der Worttrennung berücksichtigt. */Beispiel Nr. 4 So sieht's aus:
Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte.
HTML:
<table id="example-5">
<tr>
<th>Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>Donaudampfschifffahrtskapitänsmütze</td>
<td>1 3</td>
</tr>
</table>CSS:
#example-5 {
width: 100%;
table-layout: fixed;
border: 1px solid #aaa;
}
#example-5 th,
#example-5 td {
border: 1px solid #ccc;
}
#example-5 td {
word-wrap: break-word;
}
/* Hier word-wrap: break-word im Einsatz bei fixierten Zellenbreiten in einer Tabelle. */Beispiel Nr. 5 So sieht's aus:
| Head 1 | H 2 | Headline 3 |
|---|---|---|
| 1 1 | Donaudampfschifffahrtskapitänsmütze | 1 3 |
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!