Mobil

Überschrift bricht auf dem Smartphone mitten im Wort um

Üblicher Schweregrad: niedrig · Aufwand: minimal

Woran du es erkennst

Bei Smartphone-Breite wird ein Wort in einer Überschrift ohne Trennstrich über zwei Zeilen zerrissen — weder Silbentrennung (hyphens: auto) noch Soft-Hyphen sind gesetzt, der Umbruch kommt aus word-break: break-all oder overflow-wrap als Notbremse.

Warum es zählt

Lange (deutsche) Komposita sind bei fester Schriftgröße im Desktop-Stil breiter als der Smartphone-Viewport. Ein Wort, das ohne Trennstrich zerrissen wird, liest sich schlecht und wirkt kaputt — ausgerechnet in der Hero-Überschrift, die den ersten Eindruck prägt.

So behebst du es

  1. Skaliere Überschriftgrößen fließend: font-size: clamp(1.75rem, 7vw, 3rem), damit das längste Wort in den schmalsten Viewport passt.
  2. Setze das richtige lang-Attribut an <html> und nutze hyphens: auto für Überschriften, damit der Browser silbengerecht mit Trennstrich umbricht.
  3. Entferne word-break: break-all von Überschriften; nutze overflow-wrap: break-word nur als Rückfall oder füge in bekannte lange Wörter &shy; ein.
  4. Teste bei 320, 360 und 390 px Breite mit dem längsten Überschriftswort.

Zum Nachlesen