WordPress Silbentrennung für Responsive Design

Silbentrennung schalten Sie in WordPress mit einer CSS-Zeile ein: hyphens: auto. Damit der Browser deutsch trennt, muss die Sprache der Seite stimmen. WordPress übernimmt sie aus „Einstellungen > Allgemein > Website-Sprache“ und schreibt sie als lang-Attribut in jede Seite. Wo die CSS-Zeile hingehört, hängt vom Theme ab: bei klassischen Themes in den Customizer, bei Block-Themes in die Stile des Website-Editors. Hier finden Sie den Code, beide Wege, den Zeilenumbruch im Block-Editor und die Stolperfallen, die ich auf dieser Website selbst erlebt habe (Stand: 30. Oktober 2026).

Ohne Trennung passen lange Wörter auf dem Handy nicht in die Zeile. Der Text läuft über den Rand, und die ganze Seite lässt sich seitlich verschieben. Genau das ist auf dieser Website im Oktober 2026 passiert: Die Überschrift „Barrierefreiheitserklärung“ war auf einem schmalen Handy breiter als der Bildschirm. Für ein sauberes responsives Webdesign mit WordPress gehört die Silbentrennung deshalb dazu, gerade bei deutschen Texten.

Der richtige CSS-Code

Diesen Block nutze ich als Ausgangspunkt. Er trennt Fließtext, Listen und Überschriften und fängt alles ab, was sich nicht trennen lässt:

p, li, h1, h2, h3, h4 {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

• hyphens: auto erlaubt dem Browser, Wörter nach dem Wörterbuch der Seitensprache zu trennen. An der Trennstelle setzt er einen Bindestrich.
• -webkit-hyphens: auto brauchen nur noch Safari-Versionen vor 17. Seit Safari 17 funktioniert die Eigenschaft ohne Präfix, so steht es in den Kompatibilitätsdaten von MDN. Die Zeile schadet nicht und hilft älteren iPhones.
• overflow-wrap: break-word ist die Notbremse für Zeichenketten, die kein Wörterbuch kennt: lange Adressen, E-Mail-Adressen, Artikelnummern. Der Browser bricht sie nur dann um, wenn sie sonst über den Rand laufen würden, und zwar ohne Bindestrich.

Was Sie aus alten Anleitungen streichen sollten

Viele Anleitungen im Netz, auch die erste Fassung dieses Beitrags von 2023, empfehlen noch diese Zeilen:

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;

Nehmen Sie sie heraus. word-break: break-all erlaubt laut MDN einen Umbruch zwischen zwei beliebigen Zeichen. Der Browser trennt Wörter dann an jeder Stelle, auch ohne Bindestrich und auch dort, wo das Wort in die nächste Zeile gepasst hätte. Das ist das Gegenteil einer sauberen Silbentrennung. word-break: break-word führt MDN als veraltet, und -ms-word-break war nur für den Internet Explorer gedacht. Auch -moz-hyphens brauchen Sie nicht mehr, Firefox kennt hyphens seit Version 43 ohne Präfix.

Überschriften nur auf dem Handy trennen

Ein getrenntes Wort in einer Überschrift liest sich schlechter als in einem Absatz. Auf dieser Website trenne ich Überschriften deshalb nur auf schmalen Bildschirmen. Ab Tablet-Breite ist die Spalte breit genug, und die Trennung ist wieder aus:

@media (min-width: 768px) {
  h1, h2, h3, h4 {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

Kurze Wörter nicht trennen

Mit hyphenate-limit-chars legen Sie fest, wie lang ein Wort mindestens sein muss, bevor der Browser es trennt, und wie viele Buchstaben vor und nach dem Trennstrich stehen bleiben. hyphenate-limit-chars: 6 3 2; heißt: nur Wörter ab sechs Buchstaben, mindestens drei vor und zwei nach dem Strich. Laut MDN unterstützen das Chrome und Edge ab Version 109 und Firefox ab Version 137, Safari bisher nicht. Browser ohne Unterstützung ignorieren die Zeile einfach, Sie können sie also gefahrlos ergänzen.

Warum der Browser nicht trennt: die Sprache

hyphens: auto wirkt nur, wenn der Browser weiß, in welcher Sprache der Text steht, und ein Wörterbuch dafür hat. Fehlt das lang-Attribut oder ist es falsch, passiert nichts. So prüfen Sie es:

1. Öffnen Sie in WordPress „Einstellungen > Allgemein“ und schauen Sie, was unter „Website-Sprache“ steht, zum Beispiel „Deutsch“.
2. Öffnen Sie eine Seite Ihrer Website, klicken Sie mit der rechten Maustaste und wählen Sie „Seitenquelltext anzeigen“. Ganz oben im <html>-Element steht dann etwa lang="de" oder lang="de-DE". Beides funktioniert.
3. Steht dort lang="en-US", obwohl Ihr Text deutsch ist, trennt der Browser nach englischen Regeln. Dann ist entweder die Website-Sprache falsch eingestellt, oder ein Theme oder Plugin überschreibt sie.

Ein Sonderfall betrifft Websites in der Schweiz. Wer „Deutsch (Schweiz)“ einstellt, kennzeichnet die Seite als Schweizer Deutsch (de-CH). Laut den MDN-Kompatibilitätsdaten unterstützt Safari die Trennung nach Schweizer Rechtschreibung nicht, Chrome und Firefox schon. Prüfen Sie solche Seiten deshalb einmal auf einem iPhone.

Wo das CSS in WordPress hingehört

Klassisches Theme: der Customizer

Gehen Sie zu „Design > Customizer“ und öffnen Sie dort „Zusätzliches CSS“. Fügen Sie den Code ein und klicken Sie auf „Veröffentlichen“. Die Vorschau zeigt die Wirkung sofort, wenn Sie das Fenster schmal ziehen.

Block-Theme: die Stile im Website-Editor

Bei Block-Themes wie Twenty Twenty-Five blendet WordPress den Customizer aus. Dort finden Sie das Feld so:

1. „Design > Editor“ öffnen und links auf „Stile“ klicken.
2. Oben rechts neben „Stile“ das Menü mit den drei Punkten öffnen und „Zusätzliches CSS“ wählen.
3. Code einfügen und speichern.

Diesen Weg habe ich am 30. Oktober 2026 in einem aktuellen WordPress mit deutscher Oberfläche nachgeklickt. Für einzelne Blocktypen gibt es unter „Stile > Blöcke“ ein eigenes CSS-Feld. Dort schreiben Sie nur hyphens: auto; ohne Selektor und ohne geschweifte Klammern, WordPress ergänzt den Selektor des Blocks selbst. Beides beschreibt die WordPress-Dokumentation zu den Stilen. Dort steht auch ein wichtiger Hinweis: Dieses CSS übersteht Theme-Updates, verschwindet aber, wenn Sie das Theme wechseln.

Child-Theme

Wer ohnehin ein Child-Theme nutzt, legt den Code in dessen style.css. Dort ist er versioniert und liegt bei den übrigen Anpassungen. Für eine einzelne Regel lohnt sich ein neues Child-Theme aber nicht, dann reicht das Feld „Zusätzliches CSS“.

Nur bestimmte Bereiche trennen

Soll nur ein bestimmtes Element trennen, etwa der Titel in einer Karte, brauchen Sie seine CSS-Klasse. Klicken Sie im Browser mit der rechten Maustaste darauf und wählen Sie „Untersuchen“. Im Code steht dann zum Beispiel <h3 class="karte-titel">, und Ihre Regel lautet .karte-titel { hyphens: auto; }.

Und ein Plugin?

Im WordPress-Verzeichnis gibt es das kostenlose Plugin Silbentrennung von Marc Tönsing (über 200 aktive Installationen, Stand 30. Oktober 2026). Es schaltet die Trennung für die ganze Website ein, passend zur Spracheinstellung. Wer kein CSS eintragen kann oder darf, ist damit gut bedient. Alle anderen sparen sich das zusätzliche Plugin, denn die CSS-Zeile leistet dasselbe und lässt sich genauer steuern.

Einzelne Wörter von Hand trennen

Für einzelne Wörter, die der Browser falsch oder gar nicht trennt, gibt es drei Zeichen in HTML:

• ­ ist ein weicher Trennstrich. Er ist unsichtbar und erscheint nur dann als Bindestrich, wenn das Wort an dieser Stelle umbrechen muss. Mit hyphens: auto hat er Vorrang vor der automatischen Trennung.
• <wbr> markiert eine Umbruchstelle ohne Bindestrich. Das passt für Adressen, Dateipfade und Wörter mit Schrägstrich.
•   ist ein geschütztes Leerzeichen. Es hält zusammen, was nicht getrennt werden soll, etwa „10 Euro“ oder „§ 3“.

Im Block-Editor setzen Sie diese Zeichen so: Block auswählen, oben in der Werkzeugleiste das Menü mit den drei Punkten öffnen, „Als HTML bearbeiten“ wählen und das Zeichen an der gewünschten Stelle eintippen. Ein Beispiel aus meinen BFSG-Ratgebern:

Barrierefreiheits­stärkungs­gesetz

Auf der Seite sieht das Wort ganz normal aus, auf dem Handy trennt es sauber an den Fugen: Barrierefreiheits­stärkungs­gesetz.

Weiche Trennstriche und Screenreader

Weiche Trennstriche haben einen Haken: Sie stehen im Text, und Screenreader lesen den Text vor. Jan Hellbusch hat das mit drei Screenreadern getestet (Mai 2025). JAWS 2025 betont ein Wort mit weichen Trennstrichen so, als wären es mehrere einzelne Wörter. NVDA 2024.4.2 liest die Trennstriche je nach Einstellung als Satzzeichen mit, dann ist der Text kaum noch zu verstehen. Bei VoiceOver fiel ihm kein Unterschied auf.

Meine Regel daraus: ­ nur punktuell einsetzen, etwa in einer Überschrift mit einem sehr langen Wort. Für Fließtext ist hyphens: auto besser, weil CSS nur die Darstellung ändert und den Text unangetastet lässt. Mehr zum Testen mit Screenreader steht im Ratgeber WordPress barrierefrei machen.

Zeilenumbruch in WordPress einfügen

Im Block-Editor macht die Enter-Taste aus jedem Druck einen neuen Absatz-Block. Für einen Zeilenumbruch innerhalb desselben Absatzes drücken Sie Umschalt und Enter. WordPress setzt dann ein <br>, der Abstand zur nächsten Zeile bleibt eng. Das passt für Adressen, Gedichtzeilen oder eine Unterschrift unter einem Text.

Soll ein Umbruch nur auf großen Bildschirmen gelten, geben Sie dem <br> über „Als HTML bearbeiten“ eine Klasse, zum Beispiel <br class="nur-desktop">, und blenden ihn auf dem Handy aus:

@media (max-width: 767px) {
  .nur-desktop { display: none; }
}

Silbentrennung verhindern

Manche Wörter sollen nie getrennt werden: Ihr Firmenname, Produktnamen oder Code. Dafür kennt hyphens zwei weitere Werte:

• hyphens: manual trennt nur an weichen Trennstrichen, die Sie selbst gesetzt haben. Das ist der Standardwert des Browsers.
• hyphens: none trennt gar nicht, auch nicht an weichen Trennstrichen.

Für einen Firmennamen geben Sie dem Wort eine Klasse, etwa <span class="marke">, und schreiben .marke { hyphens: none; white-space: nowrap; }. Die zweite Angabe hält auch mehrteilige Namen in einer Zeile.

So testen Sie das Ergebnis

1. Schmal machen: Öffnen Sie in Chrome die Entwicklertools (F12) und schalten Sie die Geräteansicht ein. Ich prüfe jede neue Seite bei 375 Pixeln Breite, das entspricht kleineren iPhones.
2. Seitliches Scrollen messen: Tippen Sie in der Konsole der Entwicklertools document.documentElement.scrollWidth > window.innerWidth ein. Bei true ist irgendein Element zu breit.
3. Auf einem echten iPhone ansehen: Safari trennt mit eigenen Wörterbüchern, das Ergebnis weicht von Chrome ab.

Eine Falle aus der Praxis: Tabellen

Für Tabellen hatte ich auf dieser Website zuerst overflow-wrap: anywhere gesetzt. Das Ergebnis: Der Browser brach Wörter mitten im Wort um, aus „Advanced“ wurde „Advan“ und „ced“ in zwei Zeilen. Der Grund steht bei MDN: Mit anywhere rechnet der Browser jede mögliche Umbruchstelle in die Mindestbreite einer Zelle ein, die Spalten werden dadurch so schmal wie möglich. Mit break-word passiert das nicht. Für Tabellen und alle Elemente mit automatischer Breite nehme ich deshalb nur noch break-word.

Häufige Fragen

Wie aktiviere ich die Silbentrennung in WordPress?

Tragen Sie hyphens: auto; für Absätze und Überschriften als zusätzliches CSS ein: bei klassischen Themes unter „Design > Customizer > Zusätzliches CSS“, bei Block-Themes unter „Design > Editor > Stile“ im Drei-Punkte-Menü. Die Website-Sprache unter „Einstellungen > Allgemein“ muss zum Text passen.

Warum trennt WordPress meine Wörter nicht?

Meist stimmt die Sprache nicht: Im Seitenquelltext fehlt lang="de", oder dort steht eine andere Sprache. Seltener setzt das Theme für bestimmte Elemente hyphens: manual, das Ihre Regel überschreibt. Prüfen Sie das mit „Untersuchen“ im Browser.

Wie verhindere ich die Silbentrennung per CSS?

Mit hyphens: none; für das betroffene Element. Dann trennt der Browser das Wort gar nicht mehr, auch nicht an weichen Trennstrichen. Mit hyphens: manual; trennt er nur dort, wo Sie selbst ­ gesetzt haben.

Wie füge ich in WordPress einen Zeilenumbruch ein?

Mit Umschalt und Enter. Die Enter-Taste allein beginnt einen neuen Absatz-Block, Umschalt und Enter setzt einen Zeilenumbruch im selben Absatz.

Brauche ich ein Plugin für die Silbentrennung?

Nein. Eine CSS-Zeile reicht und lässt sich genauer steuern. Ein Plugin wie „Silbentrennung“ lohnt sich nur, wenn Sie kein CSS eintragen können.

Meine Empfehlung

Für die meisten WordPress-Seiten reicht der Code vom Anfang: hyphens: auto für Text und Überschriften, overflow-wrap: break-word als Notbremse und Überschriften ab Tablet-Breite wieder ohne Trennung. Prüfen Sie danach Ihre wichtigsten Seiten bei 375 Pixeln Breite und einmal auf einem iPhone. Wenn Ihre Seite auf dem Handy trotzdem seitlich scrollt oder das Theme nicht mitspielt, sehe ich mir das gern im Rahmen meiner WordPress-Betreuung an.