Meine liebsten CSS Code Snippets, um Wörter richtig zu trennen: Zwei Tricks, mit denen Du Textabsätze optisch schöner und vor allem lesefreundlicher gestaltest.
Wenn Du Texte auf Deiner Website hast, die entweder in Spalten oder sehr breit laufen, dann kennst Du vielleicht dieses Phänomen: Der Text sieht toll am Desktop auf, aber auf der Mobilansicht läuft das lange Wort, der deutschen Grammatik sei dank, aus dem Fenster raus. Oder der Text ordnet das lange Wort in eine neue Zeile und hinterlässt eine große Lücke.
Damit die Donaudampfschifffahrtsgesellschaft in Zukunft nicht mehr aus dem Ruder … ähem … Fenster läuft, zeige ich Dir zwei kleine Hacks, die einen großen Unterschied und den Text nicht nur optisch schöner, sondern vor allem auch lesefreundlicher machen.
Warum sind Silbentrennung und Text-Balancierung wichtig?
Wenn lange Wörter, gerade in Fließtexten, ohne Silbentrennung umgebrochen werden, entstehen unschöne große Lücken oder überlange Zeilen. Mit Silbentrennung kann der Text sauberer fließen und wirkt professioneller – besonders in responsiven Layouts oder bei Spalten.
Den Text ausbalancieren (Balance Wrapping) hilft, wenn eine letzte Zeile viel kürzer ist als die davor: Es sorgt dafür, dass die Zeilen selbst auf kleinen Bildschirmen oder bei variabler Breite ausgeglichener aussehen und das Gesamtbild harmonischer wirkt.
Silbentrennung, also Wörter richtig trennen bzw. teilen
CSS Code Snippet zum Kopieren
/** SILBENTRENNUNG **/
.text-break {
hyphens: auto;
}Wirkung
Aktiviert automatische Silbentrennung, d.h. lange Wörter werden bei Zeilenumbruch getrennt.
Wann einsetzen
In längeren Fließtexten, in Spaltenlayouts, bei schmalen Containern, bei responsivem Design.
Beispiel vorher
Dies ist ein Beispieltext mit sehr langen Wörtern wie „Entwicklungsumgebungsdesignanalyse“, „Datenübertragungssystem“ und „Suchmaschinenoptimierungsdienstleistung“, um zu zeigen, wie der Text von Silbentrennung profitieren kann.
Beispiel nachher
Dies ist ein Beispieltext mit sehr langen Wörtern wie „Entwicklungsumgebungsdesignanalyse“, „Datenübertragungssystem“ und „Suchmaschinenoptimierungsdienstleistung“, um zu zeigen, wie Silbentrennung hier nützlich ist.
Lange Wörter hinterlassen störende Lücken und werden zudem grammatikalisch nicht richtitg getrennt.
Text ausbalancieren
CSS Code Snippet zum Kopieren
/** TEXT AUSBALANCIEREN **/
.balance {
text-wrap: balance;
}Wirkung
Balanciert Zeilen um, besonders die letzte Zeile wird nicht zu kurz.
Wann einsetzen
Titel, Überschriften, Teaser-Blöcke, letzte Zeile bei mehrzeiligem Text.
Beispiel vorher
Eine Überschrift mit dem langen Wort „Webdesigntipps“
Beispiel nachher
Eine Überschrift mit dem langen Wort „Webdesigntipps“
Beim Beispiel vorher sind die Zeilenenden etwas unruhig und das Wort „Webdesigntipps“ läuft aus dem Bild.
Hier fügst Du den CSS Code ein
Den Code kopierst Du und fügst ihn in Deine Website ein, am Besten übergeordnet in den Elementor Website-Einstellungen, damit er auf allen Unterseiten greift, wo Du in ansprechen möchtest.
Alternativ kannst Du ihn im Theme Customizer oder direkt in Deinem Child Theme hinterlegen.
So sprichst Du den Code dann an
Im Block Editor
Im Block Editor kannst Du dem Text oder der Überschrift rechts im Menü unter Block > Erweitert > Zusätzliche CSS-Klasse(n) die entsprechende Klasse (ohne Punkt davor!) geben.
In Elementor
In Elementor kannst Du im Menü links unter Bearbeiten > Erweitert > Layout > CSS-Klassen den entsprechenden Eintrag machen.
Wende dann die Klassen an gewünschter Stelle an:
- .balance an Überschriften oder Textblöcke, wo die Zeilenlänge optisch verbessert werden soll
- .text-break an alle Elemente, bei denen Silbentrennung gewünscht ist
Ergebnis
Mit nur wenigen Zeilen CSS bekommst Du deutlich bessere Typografie und mehr Lesbarkeit:
- Mehr Kontrolle über Wörter, Zeilen und Layout
- Besserer visueller Eindruck, besonders bei responsiven Designs
- Einfach umzusetzen & flexibel einsetzbar
Viel Spaß damit! 😊
