Silbentrennung in Webseiten

Die automatische Silbentrennung in CSS3 macht es möglich, ein paar kleine Zusätze im entsprechenden CSS eingetragen und schon werden die Silben automatisch getrennt. Die Browser Mozilla Firefox, Microsoft Edge (Internet Explorer 10) und Safari trennen Silben per CSS3-hyphens.

Beispiel:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
Normaler Text! hyphens: auto; 
<style>
p {
 hyphens: auto;
}
</style>

Als Eigenschaften gibt es: auto, manual und none, auto schaltet die Silbentrennung ein, manual schaltet die Silbentrennung ab und none deaktiviert diese. 

<style>
p { 
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 -webkit-hyphens: auto;
 hyphens: auto;
}
</style>

Der Browser Mozilla Firefox benötigt ab Version 44 kein Präfix (-moz-) mehr!

➤ Damit die Silbentrennung mit deutschen Texten (beim Mozilla Firefox) richtig funktioniert, muss die Sprache der Seite im <html>-Element gesetzt sein:

<html lang="de">

Blocksatz oder Flattersatz

Wenn der Text so wie in Büchern dargestellt werden soll, verwenden Sie zusätzlich: text-align: justify;

Beispiel:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
text-align: justify; hyphens: auto;
text-align: justify;

Anweisung: hyphenate-limit-chars

Diese Eigenschaft in CSS teilt dem Browser mit, wie viele Zeichen ein Wort vor der Silbentrennung haben soll, sowie die Mindestanzahl von Zeichen vor und nach dem Bindestrich. Auf diese Weise können wir unangenehme Silbentrennungen vermeiden und uns ein zusätzliches Maß an Kontrolle geben, wenn es darum geht, wie Wörter von Zeile zu Zeile fließen.

.element {
 hyphens: auto;
 hyphenate-limit-chars: 10 3 4;
}
[Bildschirmfoto] Silbentrennung im Microsoft Edge (97) Browser
Silbentrennung im Microsoft Edge (97) Browser
[Bildschirmfoto] Silbentrennung im Mozilla Firefox (94) Browser
Silbentrennung im Mozilla Firefox (94) Browser
[Bildschirmfoto] Silbentrennung im Microsoft Edge Browser (Android)
Silbentrennung im Microsoft Edge Browser (Android)