Mit der CSS-Eigenschaft hyphens trennt der Browser deutsche Texte automatisch am Zeilenende nach Silben - ganz ohne JavaScript-Bibliothek. Was lange als unzuverlässig galt, funktioniert seit Chrome 88 in allen großen Browsern stabil. Hier eine vollständige Anleitung mit allen verfügbaren Properties wie hyphenate-limit-chars und hyphenate-character, ein interaktiver Generator zum Ausprobieren und praktische Tipps für WordPress, Drupal und HTML.
Was ist CSS hyphens?
Die CSS-Eigenschaft hyphens steuert, wie ein Browser lange Wörter am Zeilenende behandelt. Im Standard-Verhalten lässt der Browser lange Wörter über den Rand hinausragen oder verschiebt sie komplett in die nächste Zeile - was bei deutscher Sprache mit ihren Komposita wie "Donaudampfschifffahrtsgesellschaftskapitän" zu unschönen Lücken im Blocksatz führt.
Mit hyphens: auto macht der Browser, was man im Druck längst kennt: Er trennt das Wort an einer sinnvollen Silbengrenze und setzt einen Trennstrich. Das Ergebnis sind gleichmäßigere Zeilen und sauberer Blocksatz. Voraussetzung: Der Browser kennt die Wörterbuch-Trennregeln für die jeweilige Sprache, und das lang-Attribut der Seite muss korrekt gesetzt sein.
Browser-Support 2026
Die Unterstützung ist heute praktisch flächendeckend, mit einer wichtigen Einschränkung:
| Browser | hyphens: auto | hyphenate-limit-chars | hyphenate-character |
|---|---|---|---|
| Chrome ab Version 88 (Februar 2021) | Ja | Ja | Ja |
| Edge ab Version 88 | Ja | Ja | Ja |
| Firefox (alle aktuellen Versionen) | Ja | Eingeschränkt | Ja |
| Safari (alle aktuellen Versionen) | Ja | Ja | Ja |
| Chrome auf Android | Ja | Ja | Ja |
| Safari iOS | Ja | Ja | Ja |
Die Einführung in Chrome 88 war der entscheidende Schritt - bis dahin musste man auf JavaScript-Lösungen wie Hyphenator.js zurückgreifen oder im Quelltext ­ Soft-Hyphens manuell setzen. Heute reichen drei Zeilen CSS für die meisten Anwendungsfälle.
hyphens: auto funktioniert, muss der Browser wissen, in welcher Sprache der Text geschrieben ist. Setze das lang-Attribut entweder am <html>-Tag (gilt für die ganze Seite) oder gezielt an einzelnen Elementen. Ohne dieses Attribut greift der Browser im besten Fall auf die Default-Sprache des Systems zurück, im schlechtesten Fall trennt er gar nicht.
Beispiel: <html lang="de"> für deutschsprachige Seiten.
Interaktiver CSS-Hyphens Generator
Probiere die verschiedenen Properties hier direkt aus. Ändere die Werte, beobachte die Live-Vorschau und kopiere das fertige CSS am Ende.
Lade...
4. CSS-Code zum Kopierenlang="de" (oder de-DE) - sonst greift hyphens: auto nicht.Was du beim Einsatz der generierten Regeln beachten solltest
CSS-Silbentrennung ist eine reine Darstellungs-Eigenschaft - sie verändert weder den HTML-Quelltext noch den SEO-Inhalt deiner Seite. Trotzdem ein paar Hinweise zum Einsatz:
- Globales hyphens nur mit Bedacht -
* { hyphens: auto }trifft auch Code-Blöcke, URLs und Tabellen. Lieber gezielt auf.post-body p, .post-body lioder ähnliche Inhalts-Selektoren beschränken. - Lang-Attribut prüfen - der Browser braucht das richtige Wörterbuch. Bei Multi-Sprachen-Seiten muss
langpro Sprachblock korrekt gesetzt sein, sonst entstehen falsche Trennstellen. - Print-CSS testen - hyphens wirkt auch beim Drucken oder PDF-Export. Wenn dein Theme separate Print-Styles hat, dort gegenprüfen.
Sicherheit des Generators selbst: Der Code läuft vollständig in deinem Browser. Beim hyphenate-character wird die Eingabe streng validiert (max. 3 Zeichen, keine Anführungszeichen, Semikola, Backslashes oder Klammern) - das verhindert, dass durch geschickte Eingaben CSS-Injection im kopierten Code möglich wird. Der Beispieltext wird in der Vorschau ausschließlich per textContent gesetzt, nicht als HTML interpretiert: HTML-Tags oder Script-Codes aus dem Textfeld können also keinen Schaden anrichten.
Die Properties im Detail
hyphens
Die Haupt-Eigenschaft mit drei möglichen Werten:
none- keine Silbentrennung, auch nicht bei manuell gesetzten Soft-Hyphens. Lange Wörter ragen über den Rand oder verschieben den Layout-Fluss.manual- Trennung nur an den Stellen, an denen du selbst einen Soft-Hyphen­oder einen normalen Bindestrich gesetzt hast. Browser-Default in den meisten Fällen.auto- der Browser verwendet sein eingebautes Sprach-Wörterbuch und trennt automatisch an Silbengrenzen. Funktioniert nur, wenn daslang-Attribut gesetzt ist.
hyphenate-limit-chars
Steuert, wann ein Wort überhaupt für die Trennung in Frage kommt. Drei Werte hintereinander:
- Wortlänge gesamt - Wörter unter dieser Länge bleiben unverändert. Default: 5.
- Zeichen vor der Trennung - mindestens so viele Buchstaben müssen vor dem Trennstrich stehen. Default: 2.
- Zeichen nach der Trennung - mindestens so viele Buchstaben müssen nach dem Trennstrich folgen. Default: 2.
Beispiel: hyphenate-limit-chars: 6 3 3 trennt nur Wörter ab 6 Buchstaben Länge, mit mindestens 3 Zeichen vor und 3 nach dem Trennstrich. Das vermeidet Mini-Trennungen wie "A-na" und sieht im deutschen Text besonders sauber aus.
hyphenate-character
Bestimmt, welches Zeichen als Trennstrich genutzt wird. Default ist auto, was den Hyphen-Unicode-Codepoint U+2010 verwendet. Du kannst aber ein eigenes Zeichen vorgeben:
p { hyphenate-character: '⸗'; } /* Doppelbindestrich, U+2E17 */
p { hyphenate-character: '-'; } /* einfacher ASCII-Bindestrich */
p { hyphenate-character: ''; } /* gar kein sichtbarer Strich */Praktisch wird das vor allem im typografisch anspruchsvollen Schriftsatz, wo der Doppelbindestrich für Frakturschriften klassisch ist.
hyphenate-limit-lines
Begrenzt, wie viele aufeinanderfolgende Zeilen in einem Absatz mit einer Trennung enden dürfen. Zu viele Trennungen in Folge ("Trennspalten") sind typografisch unschön. Mit hyphenate-limit-lines: 2 bricht der Browser nach maximal zwei Zeilen mit Trennung um. Default ist no-limit.
hyphenate-limit-last
Steuert, ob die letzte Zeile eines Absatzes oder einer Seite eine Trennung enthalten darf. Werte: none (egal), always (letzte Zeile darf trennen), column, page, spread. Sehr selten gebraucht, vor allem in Print-CSS für Bücher.
hyphenate-limit-zone
Definiert, wie nah am rechten Rand eine Trennung auftreten darf. Wenn das Wort schon fast bis zum Rand reicht, lohnt sich eine Trennung kaum. Mit hyphenate-limit-zone: 8% sagst du dem Browser: lass die letzten 8% der Zeilenbreite ohne Trennung. Vor allem für Blocksatz-Optimierung.
word-break
Separates Konzept, oft mit hyphens verwechselt. word-break: break-all bricht Wörter an jedem Zeichen, wenn sie sonst nicht passen - ohne Trennstrich, ohne Silbenrücksicht. Sinnvoll bei langen URLs oder im CJK-Schriftsatz. Für deutsche Texte fast nie verwenden.
overflow-wrap (vorher word-wrap)
Ein dritter Mechanismus für extreme Fälle. overflow-wrap: break-word bricht Wörter, die sonst über den Rand laufen würden - aber nur als Notlösung, nicht für jeden Zeilenumbruch. Sinnvoll als Fallback in Kombination mit hyphens: auto.
Soft Hyphens als Alternative oder Ergänzung
Falls du nicht auf hyphens: auto setzen willst (oder kannst), gibt es die manuelle Variante: Soft Hyphens. Das sind unsichtbare Trennungs-Hinweise im HTML, die dem Browser sagen "hier kannst du im Notfall trennen".
<p>Donaudampf­schifffahrts­gesellschaft</p>
<p style="hyphens: manual">...</p>Vorteile: Funktioniert in jedem Browser ohne lang-Attribut. Du hast volle Kontrolle, wo getrennt wird. Nachteile: Aufwendig, du müsstest manuell Soft-Hyphens in tausende Wörter setzen.
Eine sinnvolle Mischung: hyphens: auto für den Normalfall, plus an wenigen problematischen Stellen ergänzende Soft-Hyphens für Begriffe, die der Browser-Algorithmus falsch trennt.
Hyphens in WordPress aktivieren
Bei WordPress hängt die Lösung vom Theme ab. In den meisten Fällen reicht ein Eintrag im Customizer oder in einer Custom-CSS-Datei:
.entry-content p,
.entry-content li {
hyphens: auto;
-webkit-hyphens: auto; /* aelteres Safari */
-ms-hyphens: auto; /* IE 11 (kaum noch relevant) */
hyphenate-limit-chars: 6 3 3;
text-align: justify;
}Wichtig: WordPress setzt das lang-Attribut bei deutschen Installationen automatisch auf de-DE. Das funktioniert mit hyphens: auto. Falls du eine Mehrsprachen-Seite betreibst (mit Polylang oder WPML), kontrolliere, ob das lang-Attribut pro Sprache korrekt gesetzt wird.
Beim Gutenberg-Editor erscheinen die Trennungen erst in der Vorschau, nicht im Editor selbst - das ist normal und kein Bug.
Häufige Fehler und Stolperfallen
Trennung funktioniert nicht trotz hyphens: auto
Die häufigste Ursache: das lang-Attribut fehlt oder ist falsch gesetzt. Prüfe im Inspector, ob am <html>-Tag lang="de" oder lang="de-DE" steht. Bei Single-Page-Apps ohne lang-Attribut greift die Browser-Default-Sprache (oft Englisch), und deutsche Wörter werden dann nicht oder falsch getrennt.
Falsche Trennungen bei Fremdwörtern
Browser-Wörterbücher kennen viele Fremdwörter nicht oder trennen sie nach falschen Regeln. Beispiel: "Hypertext" wird im Deutschen anders getrennt als im Englischen. Lösung: An kritischen Stellen Soft-Hyphens manuell setzen und mit hyphens: auto kombinieren - der manuelle Hint hat Vorrang.
Zu viele Trennungen sehen unschön aus
Wenn dein Text durch automatische Silbentrennung zu "zerhackt" wirkt, hilft hyphenate-limit-chars: 8 4 4 - das erlaubt Trennung nur bei längeren Wörtern und mindestens 4 Zeichen auf jeder Seite des Strichs. Zusätzlich hyphenate-limit-lines: 2 begrenzt aufeinanderfolgende Trennungen.
JavaScript-Manipulation überschreibt CSS
Manche Frameworks oder Plugins manipulieren style-Attribute oder fügen hyphens: none nachträglich ein. In dem Fall hilft !important oder eine spezifischere Selektor-Hierarchie. Idealerweise im Dev-Tools-Inspector prüfen, welche Regel zuletzt greift.
WordPress-Theme zwingt etwas anderes auf
Einige WordPress-Themes setzen word-break: break-all oder hyphens: manual in ihrer Default-CSS. Wenn dein eigenes CSS nicht greift, suche im Theme-CSS nach Konflikten und überschreibe sie gezielt.
Praktische Beispiele für verschiedene Szenarien
Standard-Setup für Blogposts
.post-body p,
.post-body li {
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
text-align: justify;
}Lange URLs in Inhaltslisten
.url-list a {
word-break: break-all;
overflow-wrap: anywhere;
}Sidebar mit schmalen Spalten
.sidebar p {
hyphens: auto;
hyphenate-limit-chars: 5 2 2;
overflow-wrap: break-word;
text-align: left;
}In schmalen Containern wie Sidebars lohnt sich eine aggressivere Trennung mit kürzeren Limits. Bei sehr schmalen Spalten ist Linksbündig oft besser als Blocksatz, weil große Lücken sonst dominieren.
Häufige Fragen zu CSS Hyphens
Brauche ich noch JavaScript-Bibliotheken wie Hyphenator.js?
In den meisten Fällen nicht mehr. CSS hyphens: auto deckt seit 2021 alle modernen Browser ab. Eine JavaScript-Lösung lohnt sich nur noch in zwei Szenarien: extrem genaue Kontrolle über jede Trennstelle oder Unterstützung von sehr alten Browsern.
Warum trennt der Browser deutsche Wörter manchmal seltsam?
Die eingebauten Wörterbücher decken nicht jeden Sonderfall ab. Bei Komposita oder Fachbegriffen wird gelegentlich falsch getrennt. Lösung: Soft-Hyphens an den korrekten Trennstellen manuell setzen.
Funktioniert hyphens auch im Editor von WordPress?
Im Gutenberg-Editor wird der Text ohne hyphens-Style angezeigt. Erst in der Vorschau und auf der Live-Seite wird automatisch getrennt. Das ist gewollt, weil der Editor andere Schriftarten und Container nutzt als das Frontend.
Was ist der Unterschied zwischen word-break und hyphens?
hyphens trennt nach linguistischen Silbenregeln und setzt einen Trennstrich. word-break: break-all bricht Wörter an jedem Zeichen, ohne Silben-Logik und ohne Trennstrich. Für deutsche Texte ist hyphens fast immer die richtige Wahl.
Welche Browser-Präfixe brauche ich heute noch?
Für die meisten Browser keine. Sicherheitshalber kann man -webkit-hyphens für ältere Safari-Versionen mitnehmen. -ms-hyphens für Internet Explorer ist heute irrelevant.
Macht hyphens den Text SEO-schlechter?
Nein. Suchmaschinen lesen den HTML-Quelltext, nicht die gerenderte Seite. CSS-basierte Silbentrennung verändert den Text nicht im Markup, sondern nur die optische Darstellung. Für SEO komplett irrelevant.
Was passiert, wenn lang="de" fehlt?
Der Browser nutzt entweder seine UI-Sprache oder gar keine Trennregeln, je nach Browser. Bei deutschen Texten ohne lang-Attribut werden Wörter oft nicht oder falsch getrennt. Setze <html lang="de"> als Mindeststandard.
Fazit
CSS hyphens ist 2026 eine zuverlässige Lösung für automatische Silbentrennung im Deutschen. Drei Zeilen Code reichen meist - hyphens: auto, ein passendes hyphenate-limit-chars und ein gesetztes lang-Attribut. Wer noch tiefer optimieren will, kombiniert es mit hyphenate-limit-lines und manuellen Soft-Hyphens an problematischen Stellen.
Der Generator oben hilft dir, schnell die für dein Layout passende Kombination zu finden. Kopiere das CSS am Ende und passe es bei Bedarf an deine Klassen-Selektoren an.