Automatische Silbentrennung mit CSS3
CSS3 bietet in allen Bereichen viele neue Möglichkeiten. Unter anderem auch bei der Textgestaltung. Mit der CSS3-Eigenschaft “hyphens” wurde eine automatische Silbentrennung eingeführt. Damit kann die Darstellung von langen Texten verbessert werden. Wie die Silbentrennung mit CSS3 in der Praxis aussieht, könnt ihr beispielsweise in meinem SSDblog anschauen.
Damit die Silbentrennung funktioniert, muss die korrekte Sprache für die Seite definiert werden. Diese kann für das gesamte Dokument oder für einzelne Textabschnitte angegeben werden.
<html lang="de">
<p lang="de">deutscher Text</p>
<p lang="en">englischer Text</p>Aktuell muss noch mit den verschiedenen Browser-Präfixen gearbeitet werden, damit die Silbentrennung funktioniert.
p {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}Mit “auto” entscheidet der Browser selbst, wo getrennt werden muss. Bei “none” wird keine Silbentrennung angewendet. Der Standardwert der Eigenschaft ist “manual”. In diesem fall wird lediglich bei solchen Stellen getrennt, die mit “­” gekennzeichnet sind.
Firefox und Safari unterstützen die CSS3-Eigenschaft “hypehns” bereits. Opera und Chrome sollten demnächst nachziehen. Auch der Internet Explorer wird die Silbentrennung mit Version 10 unterstützen.
Sie sehen gerade einen Platzhalterinhalt von X. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
Fehlt da was?
Danke für die Info. Wurde vom WordPress-Editor entfernt.
Ah.
Siehst du, und deswegen nutze ich nie den WYSIWYG-Editor. ;)
Hallo Tobi
Deine Lösung hat bei mir nicht funktioniert. Das Internet weiss Rat (immer ein “-” davor):
-moz-hyphens:auto;
-webkit-hyphens:auto;
-o-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
Grüsse
Stephan
Danke für die Info, du hast natürlich Recht!
Schade das Chrome die automatische Silbentrennung mit hyphens immer noch nicht unterstützt. Gerade bei Responsive Webdesign fähigen Websites auf Smartphons und Tablets, würde die Lesefreundlichkeit deutlich steigen.