Silbentrennung und Bindestriche (Hyphens)

Wozu Silbentrennung?

Absatzerscheinungsbild verbessern

Die deutsche Sprache verfügt über eine Vielzahl von langen Wörtern. Ohne Silbentrennung wirkt ein schmaler Absatz daher auf der rechten Seite häufig ausgefranst.

Im folgenden Beispiel wird das Wort „Textabschnitten“ in die nächste Zeile umgebrochen, wodurch die vorherige Zeile am rechten Rand einen größeren Leerraum erhält.

Eine Darstellung im Blocksatz stellt keine ausreichende Alternative dar, weil erhöhte Wortabstände den Lesefluss erschweren:

Das Erscheinungsbild eines Absatzes kann jedoch durch Silbentrennung homogenisiert werden:

Auch bei einem Blocksatz können störende Wortabstände durch eine Silbentrennung vermieden werden:

Vergrößertes Erscheinungsbild verbessern

Wenn Nutzer*innen eine erhöhte Schriftgröße wählen, kann es bei einer fix festgelegten Breite für Elemente zu Darstellungsproblemen kommen. Der folgende Schalter könnte beispielsweise in einer App ein Formular für einen Urlaubsantrag öffnen:

Wurde jedoch in den Darstellungsoptionen die Schriftgröße verdoppelt, kommt es zu fehlerhaften Zeilenumbrüchen innerhalb der Beschriftung:

Durch eine Silbentrennung wird das Wort auch bei einer vergrößerten Darstellung leserlich umgebrochen:

Voraussetzungen für Silbentrennung

Sprachkennzeichnung

Browser verfügen über Datenbanken und Algorythmen für die Silbentrennung. Die Silbentrennung erfolgt entsprechend der Kennzeichnung der natürlichen Sprache der Wörter. Damit ein Browser auf das angemessene Wörterbuch für die Silbentrennung zugreift, muss das Wort technisch mit der korrekten Sprache gekennzeichnet sein. Dies wird in HTML durch das Attribut lang für die gesamte Webseite oder individuell für einen Textabschnitt festgelegt.

Nehmen wir einen Schalter zum herunterladen. Wird die Schriftgröße durch entsprechende Optionen im Browser erhöht, kann in einem horizontal eingeschränkten Bereich innerhalb des Wortes ein Zeilenumbruch erforderlich werden. Bei einer fehlerhaften Sprachkennzeichnung erscheint ein unpassender Zeilenumbruch ohne Trennzeichen:

Im folgenden Screenshot wurde die Schalterbeschriftung „Herunterladen“ korrekt als deutschsprachig gekennzeichnet. Die Silbentrennung entspricht den Anforderungen der deutschsprachigen Grammatik:

Zeilenumbruch unterdrücken und ermöglichen

Eine Silbentrennung ist nur möglich, wenn ein Zeilenumbruch möglich ist. Der Zeilenumbruch kann durch technische Anweisungen unterdrückt seinn.

CSS-Anweisungenfür Umbrüche

In CSS verhindern einige Anweisungen Zeilenumbrüche. Damit wird implizit auch die Silbentrennung ausgeschaltet. Hier eine Liste der CSS-Eigenschaften mit Werten zum Verhindern eines Zeilenumbruchs:

• text-wrap: nowrap
• text-wrap-mode: nowrap
• white-space: nowrap
• white-space: pre

Umgekehrt kann mit der CSS-Anweisung text-wrap-mode auch für ein pre-Element ein Zeilenumbruch bewerkstelligt werden. Das folgende Beispiel basiert auf folgenden CSS-Anweisungen:

pre {
  hyphens: auto;
  text-wrap-mode: wrap;
  width: 360px;
}

Leerzeichen, die zum Einrücken vorgesehen sind, bleiben erhalten. Die Zeile wird nach dem Umbruch jedoch nicht mehr durch Leerzeichen eingerückt. Allerdings ist das Bedienen eines horizontalen Scrollbars nicht erforderlich:

<p>
  Machen Sie eine Österreich-Rundreise mit dem Fahrrad!
</p>

MDN | text-wrap-mode

Informationen und Praxisbeispiele zu der CSS-Eigenschaft im Mozilla Developer Network

MDN | white-space

Informationen und Praxisbeispiele zu der CSS-Eigenschaft im Mozilla Developer Network

Labordatei white-space

Testszenarien zum Verhalten beim Einsatz der unterschiedlichen Werte auch bei der Silbentrennung

Darstellung als Code (HTML-Element <pre>)

Das HTML-Element pre stellt den Inhalt so dar, wie er im Quelltext realisiert wurde:

• Vorhandene Leerzeichen führen zu Einrückungen oder größeren Abständen zwischen Wörtern.
• Ein Zeilenumbruch wird standardmäßig nur dann realisiert, wenn auch im Quelltext eine neue Zeile erscheint.

Typischerweise wird ein Programmcode auf diese Weise dargestellt. Bei längeren Codezeilen kann der Inhalt horizontal jedoch über die vorgesehene Breite hinausragen und andere Inhalte überlagert. Insbesondere am Smart Phone kann der Inhalt sogar vom Display verschwinden.

Der folgende Screenshot zeigt einen CSS-Code für die Rahmengestaltung eines fokussierten Schalters. Der Wert darkgreen am Zeilenende ragt über den zulässigen Bereich hinaus.

button:focus {
  border: dashed .125rem darkgreen;
}  

Der folgende Screenshot zeigt erneut den CSS-Code für fokussierte Schalter. Allerdings wurde hier durch die CSS-Anweisung text‑wrap‑mode: wrap ein Zeilenumbruch ermöglicht. Der Wert darkgreen wird dadurch in die nächste Zeile umgebrochen. Die zweite Zeile wird jedoch nicht mehr durch Leerzeichen eingerückt.

button:focus {
  border: dashed .125rem darkgreen;
}  

Typen von Bindestrichen

Minus-Zeichen

Das Minus-Zeichen wird durch Drücken der Taste - eingefügt. Es ist immer sichtbar und bewirkt einen Zeilenumbruch, wenn das Wort nach dem Bindestrich nicht mehr in die Zeile passt.

Bindestrich

Der typografisch korrekte Bindestrich ist kürzer als das Minus-Zeichen. Da es für dieses Zeichen keine Belegung auf der Tastatur gibt, wird jedoch meist das Minus-Zeichen als Bindestrich verwendet. Auch der eigentliche Bindestrich ist immer sichtbar und bewirkt einen Zeilenumbruch, wenn das folgende Wort nicht mehr in die Zeile passt.

Bedingter Trennstrich

Ein bedingter Trennstrich kennzeichnet in einem Wort eine zulässige Umbruchstelle am Zeilenende. Er ist unsichtbar, solange das Wort nicht an der vorgesehenen Stelle getrennt und umgebrochen wird. Der erforderliche Code muss redaktionell explizit in das Wort eingefügt werden.

Befindet sich in einem Wort ein bedingter Trennstrich, wird das Wort bei einer Volltextsuche nicht gefunden.

Wer mit einer Sprachausgabe arbeitet, merkt einen leichten Unterschied, wenn ein Ausdruck einen bedingten Trennstrich enthält, unabhängig davon, ob der Trennstrich sichtbar ist oder nicht.

Geschützter Bindestrich

Ein geschützter Bindestrich hält die verbundenen Worte oder Silben am Zeilenende zusammen, sodass diese gemeinsam in die nächste Zeile umgebrochen werden. Er ist immer sichtbar und wird meistens von einer Sprachausgabe auch als "Bindestrich" vorgelesen. In neueren Versionen von Microsoft Word steht zum Einfügen der Shortcut Alt+Shift+- zur Verfügung.

Geschützte Bindestriche werden typischerweise eingesetzt, wenn ein Teil des verbundenen Wortes sehr kurz ist. ( E‑Mail, Binnen‑I, … )

CSS Anweisungen

Silbentrennung zulassen

Ob und wie Silben am Zeilenende getrennt werden, kann durch die CSS-Anweisung hyphens festgelegt werden. Folgende Werte stehen dabei zur Verfügung:

manual (Standardwert)

Eine Silbentrennung erfolgt am Zeilenende an redaktionell explizit festgelegten Umbruchstellen. Dies ist gegeben, wenn ein Wort mit einem bedingten Bindestrich (­) versehen wurde. Auch ein gewöhnlicher Bindestrich ‐ (‐) stellt als harter Trennstrich eine zulässige Umbruchstelle dar, nicht jedoch ein geschützter Bindestrich .

none

Wörter werden am Zeilenende nicht getrennt. Ein Zeilenumbruch erfolgt lediglich bei einem Leerzeichen.

auto

Wörter werden am Zeilenende getrennt, wenn verfügbare Silben vom Browser erkannt werden. Explizite technische Vorkehrungen für die Silbentrennung durch Autor*innen überschreiben jedoch Maßnahmen zur Silbentrennung durch Browser.

Der jeweilige Wert wird an Kindelemente vererbt. Die Silbentrennung kann daher zunächst für alle Elemente unterdrückt, für einzelne Elemente jedoch zugelassen werden:

body {
  hyphens: none;
}
button {
  hyphens: manual;
}

Trennzeichen ändern

Mit der CSS-Anweisung hyphenate-character kann die Darstellung des Trennzeichens festgelegt werden. Anstelle des im Browser vorgesehenen Trennzeichens könnte damit beispielsweise ein =-Zeichen bei der Silbentrennung erscheinen:

  hyphenate-character: '=';

Im folgenden Beispiel wird auf diese Weise jeweils das =-Zeichen als Trennzeichen verwendet:

Im Sinne der Lesbarkeit durch Lesegewohnheiten sollte das Trennzeichen jedoch nur in begründeten Ausnahmefällen modifiziert werden.

Das modifizierte Trennzeichen wird von einer Sprachausgabe gewöhnlich nicht vorgelesen. Verfügt ein Text zur Demonstration über einen modifizierten Trennstrich, muss daher auf die Modifikation redaktionell hingewiesen werden.

MDN | hyphenate-character

Verwandte Konzepte

Silbentrennungspunkte

Silbentrennungspunkte sind Indikatoren für Stellen innerhalb eines Wortes, an denen eine Silbentrennung grammatikalisch möglich oder durch redaktionelle Maßnahmen vorgesehen ist. Sie sind als Indikatoren immer sichtbar. Bedauerlicherweise wird das Zeichen von maßgeblichen Sprachausgaben nicht korrekt interpretiert.
(Stand August 2025: Eloquence, SAPI 5, Vocalizer )

Auch der Indikator für Silbentrennungspunkte bewirkt einen Zeilenumbruch, wenn das Wort nach dem Indikator nicht mehr in die Zeile passt. Im folgenden Screenshot sind die Stellen für die Silbentrennung im Ausdruck „Barrierefreiheit“ mit dem Indikator für Silbentrennungspunkte versehen. Die Silbe „heit“ ist nach dem Indikator für mögliche Silbentrennung in die nächste Zeile umgebrochen.

HTML-Element für Wortumbruch

Das HTML-Element <wbr> (word break) bewirkt einen Zeilenumbruch innerhalb eines Worts, wenn das Wort am Zeilenende nicht mehr gänzlich in die verfügbare Breite passt. Im Browser erscheint kein Trennstrich oder anderer visueller Indikator für das Vorhandensein des Zeilenumbruchs.

Das Vorhandensein dieses Wortumbruchs wird von einer Sprachausgabe nach meinen Recherchen ignoriert.

Der Wortumbruch kann nicht durch die CSS-Anweisung hyphens gesteuert werden.

HTML-Element für Zeilenumbruch

Das HTML-Element <br> (break) bewirkt einen Zeilenumbruch in einem Absatz, auch wenn das Zeilenende noch nicht erreicht wurde. Im Browser erscheint kein Trennstrich oder anderer visueller Indikator für das Vorhandensein des Zeilenumbruchs.

In Microsoft Word wird ein Zeilenumbruch innerhalb eines Absatzes durch Drücken von SHIFT+ENTER erzeugt. Die Darstellung am Bildschirm kann durch Konfiguration der Anzeige nicht-druckbarer Zeichen ermöglicht werden.

Geschütztes Leerzeichen

Ein geschütztes Leerzeichen verhindert, dass die beiden benachbarten Zeichen oder Silben beim Zeilenumbruch voneinander getrennt werden. Dies ist für die Lesbarkeit insbesondere bei vorhandenen Kombinationen mit kurzen Zeichenfolgen innerhalb eines Satzes zweckmäßig:

• Wert mit Einheit (80 %, 30 km, …)
• Titel vor dem Eigennamen (Dr. Gruber, GR Reburg, …)
• Ausdruck mit zusätzlicher Einstufung (Konformitätsstufe AA, COVID 19, …)

Breitenloses Leerzeichen

Ein breitenloses Leerzeichen bewirkt visuell keinen Abstand zwischen Zeichen innerhalb eines Wortes.

Ein Zeilenumbruch erfolgt,

• wenn das vorherige Wort wie bei einem gewöhnlichen Leerzeichen nicht mehr in die Zeile pass, allerdings auch innerhalb eines Wortes,
• ohne Darstellung eines Trennzeichens am Zeilenende und
• unabhängig von der CSS-Anweisung hyphens.

Du kannst das Verhalten deines Brosers und einer Sprachausgabe in der Labordatei für Silbentrennung testen.

Leider wird das breitenlose Leerzeichen von maßgeblichen Kombinationen von Screen Reader und Sprachausgabe nicht korrekt interpretiert. JAWS verwendet in der Standardkonfiguration die Sprachausgabe Eloquence. Die Eloquence kennt jedoch das breitenlose Leerzeichen nicht und gibt stattdessen „Fragezeichen“ aus. (Die SAPI Sprachausgabe ignoriert hingegen das Zeichen.)

Das breitenlose Leerzeichen sollte daher wegen potenziell rätselhafter Wiedergabe durch eine Sprachausgabe vermieden werden. (Stand August 2025) Als Alternative für einen Wortumbruch ohne Trennstrich steht das <wbr>-Element zur Verfügung.

Barrierefreiheit und Nutzungsfreundlichkeit

WCAG Kontext

Die Silbentrennung oder Trennzeichen werden in den WCAG nicht explizit behandelt. Allerdings ergeben sich aus einzelnen Erfolgskriterien Bezüge, Anforderungen und Möglichkeiten in Bezug auf den Einsatz der Silbentrennung:

Erfolgskriterium 1.3.1: Information und Beziehungen

Für die visuelle Darstellung von Inhalt und Struktur muss eine entsprechende technische Darstellung verfügbar sein. Dies ist bei der Verwendung von Trennzeichen und CSS-Anweisungen für die Silbentrennung gewährleistet.

Wenn vorhandene Bindestriche durch Konfigurationen im Screen Reader oder einer Sprachausgabe nicht angesagt werden, liegt dies nicht in der Verantwortung des Webdesigns.

Erfolgskriterium 1.4.4: Textgröße einstellen

Aus der Vergrößerung durch Browserfunktionalitäten auf 200% darf kein Verlust an Inhalt oder Funktionalität resultieren.

Die Beschriftung von Steuerelementen muss demnach auch bei einer vergrößerten Darstellung sichtbar bleiben. Dies kann bei einem horizontal eingeschränktem Bereich zu Problemen führen, die durch eine Silbentrennung behoben werden kann.

Erfolgskriterium 1.4.5: Abbildung von Text

Wo immer möglich, muss Text als solcher verfügbar sein. Eine Abbildung von Text sollte vermieden werden.

Für Text in einer Grafik lässt sich keine automatisierte Silbentrennung realisieren.

Erfolgskriterium 3.1.3 Ungewöhnliche Wörter

Konformitätsstufe AAA

Ausdrücke mit einer ungewöhnlichen Bedeutung oder streng anzuwendenden Definition sollten über einen erklärenden Mechanismus verfügen .

Ein Bindestrich kann in einem mehrdeutigen Ausdruck bereits einen hinreichenden Mechanismus zur Erklärung darstellen (Brau‑Traum / Braut‑Raum).

Erfolgskriterium 1.4.8 Visuelle Präsentation

Konformitätsstufe AAA

Die visuelle Darstellung muss in unterschiedlichen Bereichen konfigurierbar sein. Gestaltungsmöglichkeiten für die Silbentrennung werden jedoch nicht vorgeschrieben.

Erfolgskriterium 3.1.5 Leseniveau

Konformitätsstufe AAA

Für Menschen, die auf ein einfacheres Leseniveau angewiesen sind, sollten Texte zum leichteren Lesen bereitgestellt werden.

Auf die Silbentrennung am Zeilenende wird grundsätzlich verzichtet.

Zur visuellen Gruppierung von Ausdrücken in längeren Wortzusammensetzungen werden zwischen den enthaltenen Hauptwörtern Bindestriche eingefügt.

Sprachausgabe‐Verhalten

Beim Arbeiten mit einer Sprachausgabe kann die Ansage vorhandener Satzzeichen erforderlich, hilfreich oder störend sein.

Störend ist eine Ansage, wenn sie das Anhören des Textes überlagert. Ein Beispiel dafür wäre folgende Wiedergabe für die aktuelle Abschnittsüberschrift:

Codedarstellung und Bindestriche

Für CSS-Anweisungen haben wir in diesem Artikel beispielsweise bereits den Wert nowrap kennen gelernt. Um Missverständnissen vorzubeugen, muss diese Zeichenfolge exakt wiedergegeben werden:

Mehrdeutige Zeichenfolgen

Es gibt zusammengesetzte Wörter, die je nach Aussprache unterschiedliche Bedeutungen haben. Beim Ausdruck „Brautraum“ denken manche an eine Hochzeit, manche jedoch an Bier. Um möglichen Missverständnissen vorzubeugen, kann ein Bindestrich für Klarheit sorgen.

Braut-Raum / Brau-Traum

Folgende Überlegungen dienen dabei zur Optimierung:

• Bei Hauptwörtern sollten die verbundenen Ausdrücke jeweils mit einem Großbuchstaben beginnen.
• Das Minus-Zeichen sollte dabei dem eigentlichen Bindestrich vorgezogen werden, solange das Vorhandensein eines Bindestrichs von assistierenden Technologien eher verschwiegen wird.
• Ein weicher Bindestrich reicht zur Kennzeichnung nicht aus, da dieser nicht in jedem Fall sichtbar ist und auch beim Arbeiten mit einer Sprachausgabe keinen ausreichend signifikanten Hörunterschied bewirkt.

Worttrennung für leichteres Lesen

In der deutschen Sprache gibt es besonders viele lange Wörter. Die langen Wörter bestehen häufig aus der Zusammensetzung von Ausdrücken. Für Texte, die ausdrücklich für leichtes Lesen gedacht sind, werden in langen Wörtern Bindestriche zwischen Ausdrücken empfohlen:

Für das einfache Hörverständnis beim Einsatz einer Sprachausgabe stellt die Ansage eines Bindestrichs ein Problem dar. Screen Reader bieten daher Konfigurationsmöglichkeiten für die Ansage von Satzzeichen an. Menschen, die von einfacher Sprache profitieren, kennen leider diese Konfigurationsmöglichkeiten oft nicht. Als Trennzeichen sollte daher trotz der Konfigurationsmöglichkeiten im Code nicht das Minus Zeichen, sondern ein Bindestrich verwendet werden. Der Bindestrich wird tendenziell von einer Sprachausgabe häufiger ignoriert.

  Silben‐Trennung, Gleichstellungs‐Beauftragte, …