Simon
CEO, BetaHallo, schön dass du hier bist! Ich bin Simon, 33, aus Erlenbach am Main – SEO, Teamleiter und leidenschaftlicher Optimist.
Es gibt verschiedene Möglichkeiten wie du die Silbentrennung von Wörtern auf deiner Website nutzen kannst. Alle Methoden haben gewisse Vor- und Nachteile.
Die drei am häufigst eingesetzten Methoden zur Silbentrennung sind via HTML, CSS oder JavaScript:
HTML selbst verfügt über keine automatische Silbentrennung. Lange Wörter werden somit nicht von selbst getrennt und laufen daher oft über den Bildschirmrand hinaus. Das führt, besonders auf Mobilgeräten, oft zu Problemen. Der Content Manager muss daher eine manuelle Silbentrennung einfügen. Dazu existieren folgende HTML-Befehle:
Mit dem wbr – Word Break Tag wird das Wort an der vordefinierten Stelle umgebrochen, wenn nicht ausreichend Platz zur Verfügung steht. Die Trennung erfolgt ohne Trennstrich.
Betriebsräte<wbr>modernisierungsgesetz
Das Soft-Hyphen ­ oder ­ wird das Wort an der vordefinierten Stelle umgebrochen. Die Trennung erfolgt mit Trennstrich.
Da die Trennung wie beim Word Break tag manuell erfolgt wird sie oft nur beim Haupt- oder Zwischenüberschriften eingesetzt. Für den Lauftext ist der Aufwand meistens zu groß.
Betriebsräte­modernisierungsgesetzl
Wenn der Umbruch zwischen zwei Wörtern verhindert werden soll, muss ein geschütztes Leerzeichen eingefügt werden.
Das geschützte Leerzeichen verhindert, dass an dieser Stelle der Text einer neuen Zeile anfängt. Dadurch wird ein automatischer Zeilenumbruch verhindert.
Wort1 Wort2
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:
Um die Silbentrennung per CSS zu aktivieren, musst du die Eigenschaft hyphens wie folgt verwenden:
p {
hyphens: auto;
}
Damit die Silbentrennung wie von dir gewünscht umgesetzt wird, sollte der HTML-Language Code im Header korrekt angegeben sein. Wie du den HTML Language Code korrekt hinterlegst erfährst du bei W3Scools: HTML Language Code Reference (w3schools.com/tags/ref_language_codes.asp).
Ist der HTML Language Code nicht oder falsch hinterlegt wird nach einer falschen Sprache getrennt, was zu einer unschönen Silbentrennung führen kann.