Aside | CSS | Responsive Webdesign

CSS vs Trenn­vor­schlag bei langen Wörtern auf kleinen Displays

shard 8295 1920

Auf Displays von Desktoprechnern oder Notebooks sind große Überschriften meistens selbst dann kein Problem, wenn ein langes Wort drin vorkommt. Ist der Rest einer Zeile für ein Wort zu kurz, wird es in der nächsten Zeile wiedergegeben. Was aber, wenn ein Wort breiter ist, als zum Beispiel das Display eines Smartphones?

In diesem Beispiel würde die Überschrift auf einem kleinen Display über den sichtbaren Bereich hinausragen. Für kleinere Displays die Überschriften kleiner zu machen, ist ein Lösungsansatz, der auch wieder an die Grenzen der Wortlängen stößt.

Eine Überschrift mit einem langen Wort wie Gemeinwohlökonomie oder Multifunktionsgeräte

Die CSS-Anweisung word-break: break-all; verhindert, dass Elemente die Breite ihrer Elternelemente überschreiten sicher, nimmt aber keine Rücksicht auf Silbentrennvorschriften, und lässt gnadenlos auch einzelne Buchstaben stehen.

Eine Hauptüberschrift mit einem langen Wort wie Gemeinwohlökonomie oder Multifunktionsgeräte

word-wrap:break-word;

Diese Maßnahme ist nicht ganz so umbruchfreudig, aber auch damit sind die Ergebnisse in manchen Browsern unberechenbar und lassen Trennstriche vermissen.

Eine Hauptüberschrift mit einem langen Wort wie Gemeinwohlökonomie oder Multifunktionsgeräte

automatische Trennungen (hyphens)

word-break: break-word; // webkit hack, nicht standardkonform -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;


Diese CSS-Lösung wird nicht von allen Browsern unterstützt, und trennt ungegebenenfalls an der falschen Stelle (z.B. Opera) und / oder es sind gar keine Trennstriche zu sehen.

Eine Hauptüberschrift mit einem langen Wort wie Gemeinwohlökonomie oder Multifunktionsgeräte

Die scheinbar immer noch sicherste Lösung ist das Trennvorschlags-Zeichen (­ oder U+2010), oder auch „weiche Trennung“ genannt. Das kann man im Gegensatz zum herkömmlichen Bindestrich nur sehen, wenn der Trennungsfall tatsächlich eintritt. Wenn es nur um ein paar besonders lange Wörter in Überschriften geht, hat man damit das Ziel schnell erreicht.

Anwendung

<h1>Eine Haupt&shy;über&shy;schrift mit einem langen Wort wie Gemein&shy;wohl&shy;öko&shy;nomie oder Multi&shy;funktions&shy;geräte</h1>

Ergebnis

Eine Haupt­über­schrift mit einem langen Wort wie Ge­mein­wohl­öko­no­mie oder Mul­ti­funktions­ge­räte

Eine Haupt­­über­­schrift mit einem langen Wort wie Ge­mein­wohl­öko­no­mie oder Mul­ti­funktions­ge­räte

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.