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

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

Textumbruch an Trennungszeichen

Bewirkt eine automatische Worttrennung oder unterdrückt weiche Trennzeichen.

CSS-Eigenschaft: hyphens
KurzbeschreibungWerteStandardwertKategorieHinweis
Textumbruch an Trennungszeichen
  • none
  • manual
  • auto
manual
Allgemein:
Textdarstellung
CSS 3:
Text
Neu in CSS 3
 

Folgendes ist beim Einsatz von hyphens zu beachten:

hyphens bewirkt entweder eine automatische Worttrennung oder unterdrückt weiche Trennzeichen (bedingter Trennstrich), falls diese im HTML hinterlegt sind. Dabei stehen folgende Werte zur Verfügung:

  • none unterdrückt weiche Trennzeichen, wenn per HTML-Entity ­ oder HTML-Entity-Nummer ­ ein bedingter Trennstrich definiert ist.
  • manual bewirkt, dass weiche Trennzeichen zu einer Worttrennung führen. manual ist der Standardwert für hyphens.
  • auto "aktiviert" die automatische Worttrennung nach Regeln der über das HTML-Attribut lang definierten Sprache.

hyphens wird vom Mozilla Developer Network wie folgt eingeleitet: This is an experimental technology. Und auch die aktuelle Browserunterstützung (Februar 2013) ist noch recht marginal. hyphens wird in der Standardschreibweise noch von keinem Browser unterstützt.

Nicht nur die mangelnde Browserunterstützung könnte gegen den Einsatz von hyphens sprechen. Auch die Tatsache, dass die drei unterschiedlichen Werte none, manual und auto unterschiedlich unterstützt werden, schränkt diese CSS3-Eigenschaft für den Praxiseinsatz ein.

Browserunterstützung von hyphens
Firefox 18 Google Chrome 23 Internet Explorer 9 Safari 5 Opera 12
none -moz- -webkit- nein -webkit- nein
manual -moz- -webkit- nein -webkit- nein
auto -moz- nein nein -webkit- nein

Zusätzlich besteht eine Abhängigkeit von der Sprache, die über das HTML-Attribut lang definiert ist. Entweder über den <html>-Element der Seite, oder über das HTML-Tag selber. Eine automatische Worttrennung kann nur dann zuverlässig geschehen, wenn eine language-appropriate hyphenation resource, also eine passende Trennungsreferenz der entsprechenden Sprache im Browser hinterlegt ist. Firefox erkennt eine fremde Sprache und trennt Wörter dann nicht (siehe Beispiel Nr. 3). Safari hingegen ignoriert die Sprachangabe, die per lang definiert ist und trennt Worte trotzdem.

Persönliche Einschätzung von hyphens

Obwohl hyphens von aktuellen Browsern nur mäßig unterstützt wird, entspricht die Funktionalität dem, was in der Praxis häufig gefragt ist. Gerade der Wert auto ist vielversprechend, da damit die automatische Worttrennung aktiviert wird, wie es in modernen Textverarbeitungsprogrammen derweil üblich ist.

Für Webseiten, bei denen Inhalte über ein Content Management System (CMS) eingegeben werden und das Einfügen von weichen Trennzeichen &shy; oder &#173; oft nicht möglich ist, kann hyphens eingesetzt werden und damit eine Standardanforderung erfüllen.

Der Einsatz von hyphens ist letztendlich unbedenklich. Nutzer mit diesen Browsern, welche hyphens unterstützen, profitieren davon, da Texte flächenfüllender dargestellt werden. Falls ein Browser diese CSS-Eigenschaft nicht unterstützt, kommt es trotzdem nicht zu einer Fehldarstellung.

hyphens hat das Potential, dass es in Zukunft in jedem Basic-CSS zu finden ist, damit Texte einer Seite mit einer optimierten Worttrennung angezeigt werden.

Browserunterstützung von hyphens
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30
-moz-
Version: 20
-webkit-
Version: 8Version: 9Version: 10Version: 11
n-ms-
Version: 4Version: 5Version: 6Version: 7
n-webkit-
Version: 10Version: 11Version: 12
n

Weiterführende Informationen zu hyphens:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    hyphenate-resource


Beispiele

HTML:

<p id="example-1">Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!</p>

CSS:

/* Ausgangssituation: 
Ein Text mit langen Wörtern führt dazu, dass diese Worte in die nächste Zeile "rutschten" und am Ende der Zeile davor viel Leerraum bleibt. 
Moderne Textverarbeitungsprogramme (z.B. MS Word) beherrschen die automatische Worttrennung nach den Regeln der verwendeten Sprache.
Browser, ohne weitere Einstellungen, nehmen keine automatische Worttrennung vor. */
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. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!

 

HTML:

<p id="example-2" lang="de">Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!</p>

CSS:

#example-2 {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;                
}
/* hyphens mit dem Wert auto "aktiviert" die automatische Worttrennung durch den Browser.
Voraussetzung ist jedoch, dass eine entsprechende Sprache im HTML (im head für die komplette Seite, oder wie hier, in dem P-Tag) definiert
ist, damit die Regeln der verwendeten Sprache angewendet werden können. */
Beispiel nur für: Firefox
-moz-: 6
Internet Explorer
-ms-: 10
Safari

Beispiel Nr. 2 So sieht's aus:

Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!

 

HTML:

<p id="example-3" lang="uk">Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!</p>

CSS:

#example-3 {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;                
}
/* In diesem Beispiel ist die Sprache "uk" (für Ukraine) für das p-Tag definiert. 
Obwohl die Worttrennung durch hyphens mit auto definiert ist, greift hier keine automatische Trennung, 
da die Worte nicht ukrainisch sind. */
Beispiel nur für: Firefox
-moz-: 6
Internet Explorer
-ms-: 10

Beispiel Nr. 3 So sieht's aus:

Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!

 

HTML:

<p id="example-4">Einzel&shy;handels&shy;kauf&shy;leute&shy;gehälter, Donau&shy;dampf&shy;schiffs&shy;ka&shy;pitäns&shy;mützen und Problem&shy;bär&shy;erfin&shy;der&shy;vor&shy;name sind na&shy;türlich selten genutzte Worte. Bei&shy;spiele mit sol&shy;chen Wör&shy;tern sind aber ein&shy;fach gut für be&shy;stimmte Bei&shy;spiele!</p>

CSS:

/* Lange Worte können im HTML selber auch mit "Sollbruchstellen", auch als "Weiches Trennzeichen" bezeichnet, versehen werden. 
Die HTML-Entity &shy; ist das Zeichen für die optionale Worttrennung und führt dazu, dass ein Wort bei Bedarf an dieser Stelle getrennt wird. */
Beispiel nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

Beispiel Nr. 4 So sieht's aus:

Einzel­handels­kauf­leute­gehälter, Donau­dampf­schiffs­ka­pitäns­mützen und Problem­bär­erfin­der­vor­name sind na­türlich selten genutzte Worte. Bei­spiele mit sol­chen Wör­tern sind aber ein­fach gut für be­stimmte Bei­spiele!

 

HTML:

<p id="example-5">Einzel&shy;handels&shy;kauf&shy;leute&shy;gehälter, Donau&shy;dampf&shy;schiffs&shy;ka&shy;pitäns&shy;mützen und Problem&shy;bär&shy;erfin&shy;der&shy;vor&shy;name sind na&shy;türlich selten genutzte Worte. Bei&shy;spiele mit sol&shy;chen Wör&shy;tern sind aber ein&shy;fach gut für be&shy;stimmte Bei&shy;spiele!</p>

CSS:

#example-5 {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none;                
}
/* Der Wert none für hyphens unterdrückt das &shy;. Sprich: obwohl im HTML optionale Trennstellen definiert sind, wird an dieser nicht getrennt. */
Beispiel nur für: Firefox
-moz-: 6
Google ChromeInternet Explorer
-ms-: 10
Safari

Beispiel Nr. 5 So sieht's aus:

Einzel­handels­kauf­leute­gehälter, Donau­dampf­schiffs­ka­pitäns­mützen und Problem­bär­erfin­der­vor­name sind na­türlich selten genutzte Worte. Bei­spiele mit sol­chen Wör­tern sind aber ein­fach gut für be­stimmte Bei­spiele!

 

HTML:

<p id="example-6">Einzel&#173;handels&#173;kauf&#173;leute&#173;gehälter, Donau&#173;dampf&#173;schiffs&#173;ka&#173;pitäns&#173;mützen und Problem&#173;bär&#173;erfin&#173;der&#173;vor&#173;name sind na&#173;türlich selten genutzte Worte. Bei&#173;spiele mit sol&#173;chen Wör&#173;tern sind aber ein&#173;fach gut für be&#173;stimmte Bei&#173;spiele!</p>

CSS:

/* Statt der HTML-Entity &shy; kann auch die Entity-Nummer (Unicode) &#173; als weiches Trennzeichen im HTML verwendet werden und bewirkt das gleiche. */
Beispiel nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

Beispiel Nr. 6 So sieht's aus:

Einzel­handels­kauf­leute­gehälter, Donau­dampf­schiffs­ka­pitäns­mützen und Problem­bär­erfin­der­vor­name sind na­türlich selten genutzte Worte. Bei­spiele mit sol­chen Wör­tern sind aber ein­fach gut für be­stimmte Bei­spiele!

 

HTML:

<p id="example-7">Einzel&#173;handels&#173;kauf&#173;leute&#173;gehälter, Donau&#173;dampf&#173;schiffs&#173;ka&#173;pitäns&#173;mützen und Problem&#173;bär&#173;erfin&#173;der&#173;vor&#173;name sind na&#173;türlich selten genutzte Worte. Bei&#173;spiele mit sol&#173;chen Wör&#173;tern sind aber ein&#173;fach gut für be&#173;stimmte Bei&#173;spiele!</p>

CSS:

#example-7 {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none;                
}
/* Obwohl hyphens: none das weiche Trennzeichen &shy; unterdrückt, funktioniert gleiches bei der Entity-Nummer &#173; nicht.
Hier wird das Wort bei Bedarf an dem Zeichen getrennt. */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
-ms-: 10
Safari

Beispiel Nr. 7 So sieht's aus:

Einzel­handels­kauf­leute­gehälter, Donau­dampf­schiffs­ka­pitäns­mützen und Problem­bär­erfin­der­vor­name sind na­türlich selten genutzte Worte. Bei­spiele mit sol­chen Wör­tern sind aber ein­fach gut für be­stimmte Bei­spiele!

 

HTML:

<p id="example-8">Einzel&shy;handels&shy;kauf&shy;leute&shy;gehälter, Donau&shy;dampf&shy;schiffs&shy;ka&shy;pitäns&shy;mützen und Problem&shy;bär&shy;erfin&shy;der&shy;vor&shy;name sind na&shy;türlich selten genutzte Worte. Bei&shy;spiele mit sol&shy;chen Wör&shy;tern sind aber ein&shy;fach gut für be&shy;stimmte Bei&shy;spiele!</p>

CSS:

#example-8 {
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    -o-hyphens: manual;
    hyphens: manual;                
}
/* Hier der Standardwert manual für hyphens. Im Grunde überflüssig, da es nichts an der Anzeige der weichen Trennzeichen ändert. */
Beispiel nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

Beispiel Nr. 8 So sieht's aus:

Einzel­handels­kauf­leute­gehälter, Donau­dampf­schiffs­ka­pitäns­mützen und Problem­bär­erfin­der­vor­name sind na­türlich selten genutzte Worte. Bei­spiele mit sol­chen Wör­tern sind aber ein­fach gut für be­stimmte Bei­spiele!

 

HTML:

<p id="testcase-vendor" lang="de">Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!</p>

CSS:

#testcase-vendor {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
}
Beispiel nur für: FirefoxInternet Explorer
-ms-: 10
Safari

Testbeispiel: Schreibweise mit
Vendor-Präfix

Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!

 

HTML:

<p id="testcase-standard" lang="de">Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!</p>

CSS:

#testcase-standard {
    hyphens: auto;                
}

Testbeispiel: Standardschreibweise

Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!

 

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: 01. 04. 2017
Render Time: 3.366 sec.

Browser-Marktanteile