HTML und CSS: lange Wörter in den Griff bekommen

Die deutsche Sprache ist dafür bekannt dass sie einige lange Wörter hat. Hier nur zwei Beispiele:

• Unionsfraktionsvizevorsitzender
• Donaudampfschifffahrtsgesellschaftskapitän

Es gibt noch längere Beispiele, aber wir wollen hier nicht schon am Anfang das Pulver verschießen. Hat man viel Fläche zur Verfügung, dann machen solche Wörter kein Problem, aber in eingerückten Kommentarbereichen oder Infoboxen kann das schon problematisch werden. Ist das Wort breiter als die Box, dann wird die Breite der Box im Normalfall ignoriert und das Wort ragt raus:

Hier kommt ein wirklich langes Wort: Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

Was kann man dagegen tun? Es gibt mehrere Möglichkeiten, die ich kurz vorstellen möchte: bedingter Trennstrich, die CSS-Eigenschaft overflow und eine vergleichsweise unbekannte CSS3-Eigenschaft word-wrap.

Bedingter Trennstrich (soft hyphen: ­)

Ein vergleichsweise einfache Möglichkeit um lange Wörter in den Griff zu bekommen ist es “Sollbruchstellen” zu definieren wo der Browser umbrechen soll: man macht eine manuelle Silbentrennung. Überall wo der Browser trennen kann wird ­ eingefügt, z. B. Word­Press. Nach dem Einsatz von ­ schaut das Beispiel folgendermaßen aus:

Hier kommt ein wirklich langes Wort: Donau­dampf­schifffahrts­elektrizitäten­haupt­betriebs­werkbauunterbeamten­gesellschaft.

Man kann sich gut vorstellen, dass diese Lösung nicht wirklich praktikabel ist und nur dann effektiv eingesetzt wird, wenn solche Fälle selten vorkommen und man als Redakteur auch auf der HTML-Ebene arbeiten kann.

Scrollen oder Abschneiden

[adrotate banner=”42″]

Mit der CSS-Eigenschaft overflow kann man steuern, was passiert wenn der Inhalt, also ein Wort, nicht umgebrochen werden kann und die Breite der Box überschritten wird. Die Eigenschaft kennt vier Werte:

• visible – Startwerte, alles wird angezeigt
• hidden – als was über die Box hinausgeht wird abgeschnitten
• scroll – eine Scrolllesite wird erzwungen
• auto – falls notwendig wird eine Scrollleiste eingeblendet

Nehmen wir die Box aus dem oberen Beispiel und spendieren ihr overflow:auto; dann schaut es folgendermaßen aus:

Hier kommt ein wirklich langes Wort: Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

und mit overflow:hidden; sieht es so aus:

Hier kommt ein wirklich langes Wort: Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

Doch nicht immer ist overflow praktikabel. Der Wert hidden ist eine sehr extreme Lösung und Scrollleisten möchte man auch nicht überall haben. Doch es gibt eine Variante, die meiner Meinung nach am elegantesten ist.

CSS3: word-wrap

Die Eigenschaft word-wrap ist Teil von CSS3 wird aber auch von Internet Explorer 5 unterstützt! Kein Scherz. CSS3 geht zurück, lasst mich jetzt nicht lügen, bis ins Jahr 2000/2001 und schon damals gab es Unterstützung für Teilbereiche von CSS3.

Die Eigenschaft kennt lediglich zwei Werte: normal (Standardwert) und break-word. Und so schaut das erste Beispiel aus, wenn man es mit word-wrap:break-word; bestückt:

Hier kommt ein wirklich langes Wort: Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

Das Wort wird einfach da umgebrochen, wo es der Browser für richtig hält. Rücksicht auf Silben wird nicht genommen und das schaut nicht wirklich gut aus. Aber Gott sei dank kommen solche Wortungetümer im “normalen” Text so gut wie nie vor, eher sind es sehr lange Links die entweder in Trackbacks oder Kommentaren auftauchen können und für Probleme sorgen. Daher wäre es sinnvoll lediglich den Links in solchen Bereichen die Deklaration auf den Weg zu geben, dass die umgebrochen werden können: z. B. #comments a {word-wrap:break-word;}.

Und so schaut das dann aus:

Jetzt kommt ein sehr langer Link: http://www.amazon.de/gp/redirect.html?ie=UTF8&location=http%3A%2F%2Fwww.amazon.de%2Fs%3Fie%3DUTF8%26x%3D0%26ref_%3Dnb_sb_noss%26y%3D0%26field-keywords%3Dwordpress%26url%3Dsearch-alias%253Dstripbooks&site-redirect=de&tag=perun-21&linkCode=ur2&camp=1638&creative=19454

Klar, Verweise die Unter- und Bindestriche enthalten werden auch an diesen Stellen bei Bedarf getrennt. Aber es gibt immer noch sehr viele Systeme, die Links erzeugen, die schwer umgebrochen werden können.

Das letzte Beispiel hat bei mir im Test im aktuellen Firefox (3.6.13), in Chrome 8, Opera 11 und dem IE 5.5 und 6 funktioniert. Kurioserweise nicht im IE 8. Der Internet Explorer hat sich geweigert den Link umzubrechen, was meiner Vermutung daran liegt, dass er die Eigenschaft nur auf Block-Elemente umsetzt.

Der Kollege Jens Grochtdreis hat mich dann auf de Idee gebracht mit weiteren Werten für die Eigenschaft display zu probieren. Aber weder display:inline-block; noch display:table; brachten den gewünschten Effekt in IE 8. Lediglich display:block; brachte den IE8 dazu den Link umzubrechen, aber es war nicht gewünscht, weil ein Link auch ein inline-Element bleiben sollte.

Zu guter Letzt gab es doch eine Lösung. Man muss dem Internet Explorer 8 für die Links folgende Deklaration auf den weg geben #comments a {display:run-in;}. Gefunden habe ich die Lösung auf quirksmode.org.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

• CSS-Links: einheitliche Sende-Buttons, Spritepad, Sprechblasen, Flexbox statt Float
• Ein Paar Links zu HTML & CSS
• CSS3: Mehrspaltiger Text
• Links: WordPress, Google+, Editoren, CSS3, Chrome
• CSS3: Schriftgrößen mit rem angeben