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

Beschreibung
Beispiele
Fehler melden

Textumbruch an Trennungszeichen

Bewirkt eine automatische Worttrennung oder unterdrückt weiche Trennzeichen.

CSS-Eigenschaft: hyphens
Kurzbeschreibung	Werte	Standardwert	Kategorie	Hinweis
Textumbruch an Trennungszeichen	none manual auto	manual	Allgemein: Textdarstellung CSS 3: Text	Neu in CSS 3

Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text (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**

`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  oder  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

Google
Chrome

Internet
Explorer

Safari

Opera

CSS3

Version: 16	Version: 25	Version: 30
-moz-

Version: 20
-webkit-

Version: 8	Version: 9	Version: 10	Version: 11
n		-ms-

Version: 4	Version: 5	Version: 6	Version: 7
n	-webkit-

Version: 10	Version: 11	Version: 12
n

Weiterführende Informationen zu hyphens:

W3C Spezifikation:
http://www.w3.org/TR/css3-text/#hyphens
Internet Explorer Developer Center:
https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
hyphenate-resource
nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
icon

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:

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:

-moz-: 6

-ms-: 10

Beispiel Nr. 2 So sieht's aus:

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:

-moz-: 6

-ms-: 10

Beispiel Nr. 3 So sieht's aus:

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  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:

Beispiel Nr. 4 So sieht's aus:

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

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 . Sprich: obwohl im HTML optionale Trennstellen definiert sind, wird an dieser nicht getrennt. */

Beispiel nur für:

-moz-: 6

-ms-: 10

Beispiel Nr. 5 So sieht's aus:

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  kann auch die Entity-Nummer (Unicode)  als weiches Trennzeichen im HTML verwendet werden und bewirkt das gleiche. */

Beispiel nur für:

Beispiel Nr. 6 So sieht's aus:

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  unterdrückt, funktioniert gleiches bei der Entity-Nummer  nicht.
Hier wird das Wort bei Bedarf an dem Zeichen getrennt. */

Beispiel nur für:

-ms-: 10

Beispiel Nr. 7 So sieht's aus:

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:

Beispiel Nr. 8 So sieht's aus:

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:

-ms-: 10

Testbeispiel: Schreibweise mit
Vendor-Präfix

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

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!

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

Textumbruch an Trennungszeichen

Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text (CSS 3):

Folgendes ist beim Einsatz von hyphens zu beachten:

Persönliche Einschätzung von hyphens

Weiterführende Informationen zu hyphens:

Beispiele

HTML:

CSS:

Beispiel Nr. 1 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 2 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 3 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 4 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 5 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 6 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 7 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 8 So sieht's aus:

HTML:

CSS:

Testbeispiel: Schreibweise mit Vendor-Präfix

HTML:

CSS:

Testbeispiel: Standardschreibweise

Fehler melden

CSS-Wiki.com

Kategorien (allgemein)

Kategorien (W3C: CSS 2.1)

Module (W3C: CSS 3)

A-Z:

Schnell­auswahl

Seiten:

Persönliche Einschätzung von `hyphens`

Testbeispiel: Schreibweise mit
Vendor-Präfix

Schnellauswahl