Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: word-wrap, Kategorien: Textdarstellung (allgemein), Text (CSS 3)

Umgang mit Wortüberhang

Steuert, ob ein zu langes Wort umgebrochen wird oder nicht.

CSS-Eigenschaft: word-wrap
KurzbeschreibungWerteStandardwertKategorieHinweis
Umgang mit Wortüberhang
  • normal
  • break-word
normal
Allgemein:
Textdarstellung
CSS 3:
Text
Neu in CSS 3
 

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.

Browserunterstützung von word-wrap
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

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:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    word-spacing


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 nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

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 nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

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 nur für: FirefoxGoogle ChromeSafariOpera

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 nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

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 nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.113 sec.

Browser-Marktanteile