Silbentrennung bezieht sich auf den Prozess, Wörter in ihre Einzelsilben zu unterteilen. In HTML gibt es keine spezielle Funktion zur Silbentrennung, aber es gibt einige Möglichkeiten, das Aussehen von Worten mit langen Silben zu verbessern.
Wir sehen oft, dass bei langen Wörtern das Layout verschoben wird, insbesondere auf mobilen Endgeräten. Wir möchten hier einen kleinen Überblick geben, wie man mit Html eine Silbentrennung bzw. einen Zeilenumbruch etwas steuern kann.
Html Silbentrennung mit Bindestrich mit: ­ (Soft Hyphen)
Um das Wort Finanzdienstleistungsunternehmen mit einem Bindestrich bei Finanzdienstleistungs – unternehmen zu trennen müssen wir einfach folgenden Html Code verwenden:
Finanzdienstleistungs­unternehmen
Wenn der Browser jetzt keinen Platz mehr hat z.B. auf mobilen Endgeräten wird er Finanzdienstleistungsunternehmen an der vorgesehenen Stelle Mit einem Bindestrich trennen
Html Silbentrennung ohne Bindestrich mit: <wbr> (Word Break)
Ähnlich wie bei ­ wird bei <wbr> ein Umbruch erfolgen jedoch ohne Bindestrich.
Finanzdienstleistungs<wbr>unternehmen
Html Zeilenumbruch verhindern mit (Non Breaking Space)
Manchmal möchten wir aber auch gar nicht, dass der Browser bei einem Leerzeichen einen Zeilenumbruch einfügt. Ein Beispiel wäre hier eine Telefonnummer auf der Website:
Telefon: 02689 922 972
Wenn der Browser hier einen Zeilenumbruch aufgrund von Platzmangel machen muss, sieht das Ergebnis wie folgt aus:
Automatische Silbentrennung per CSS
Silbentrennung (engl. “hyphenation”) mit CSS ermöglicht es, lange Wörter automatisch an bestimmten Stellen zu trennen, um eine bessere Lesbarkeit zu erreichen und um die Formatierung des Textes auf einer Webseite zu optimieren. Um die automatische Silbentrennung in CSS zu aktivieren, kann man die Eigenschaft “hyphens” verwenden. Zum Beispiel:
p {
hyphens: auto;
}
Diese Anweisung aktiviert die automatische Silbentrennung für alle Absätze auf der Webseite. Es gibt auch die Möglichkeit, die Silbentrennung nur für bestimmte Sprachen zu aktivieren, indem man die Eigenschaft “lang” verwendet. Beispiel:
p {
hyphens: auto;
lang: en;
}
Dies würde die Silbentrennung nur für Absätze aktivieren, deren Sprache als Englisch gekennzeichnet ist. Es gibt auch Browser spezifische Eigenschaft “hyphens: none” und “hyphens: manual” die man verwenden kann. Es ist wichtig zu beachten, dass die Unterstützung für Silbentrennung von Browser zu Browser unterschiedlich ist und dass es möglicherweise nicht in allen Browsern ordnungsgemäß funktioniert.
Wir als Webdesign Agentur achten sehr darauf, dass sich lange Wörter im Text wenn es sein muss, an der richtigen Stelle trennen.