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

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

Umgang mit Wortüberhang

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

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

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.

Browserunterstützung von overflow-wrap
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16
n
Version: 20
u
Version: 8Version: 9Version: 10
n
Version: 4Version: 5
n
Version: 10Version: 11Version: 12
uj

Weiterführende Informationen zu overflow-wrap:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    overflow-style


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 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 {
    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 nur für: Google ChromeOpera

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 nur für: Google ChromeOpera

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;
}
Beispiel nur für: Google ChromeOpera

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!

A-Z:

Schnell­auswahl

Seiten:

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

Browser-Marktanteile