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)
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
Wichtig ist, dass der Browser „weiß“, für welche Sprache die Anweisung gilt. im HTML-Tag muss die Sprache in der die Website gehalten ist, daher ausgewiesen sein.
<html lang="de">Diese CSS-Lösung trennt nicht immer an der korrekten Stelle, 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­über­schrift mit einem langen Wort wie Gemein­wohl­öko­nomie oder Multi­funktions­geräte</h1>
Schreibe einen Kommentar