WordPress & Webwork

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

Wie man mit Hilfe von HTML und CSS sehr lange Wörter in den Griff bekommt, damit Sie zum Beispiel nicht das Layout "sprengen".

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.

13 Reaktion(en)

  1. NetzBlogR

    Der Nachteil des bedingten Trennstriches ist natürlich, dass er beim Kopieren des Textes als einzelnes Zeichen behandelt wird. Das kann beim Kopieren von Texten in andere Medien schnell mal zum Problem werden.

    Ich denke, wir werden im Internet nie eine Möglichkeit finden, damit Texte in jedem Browser auf jedem System gleich aussehen. Leider…

  2. Webstandard-Blog (Heiko)

    Schönes Beispiel, eine andere alternative habe ich im Dezember im CSS-Adventskalender vorgestellt. In der werden basierend auf Text-Overflow und anhand der Kennzeichnung mittels Auslassungszeichen Texte abgeschnitten. Diese Vorgehensweise ist allerdings auch nicht in letzter Instanz zu empfehlen 😉

  3. Stefan

    Sehr guter Bericht,

    nur Donau­dampf­schiffahrt…
    schreibt man seit der Rechtschreibreform mit 3 f
    Donau­dampf­schifffahrt… – das Wort ist also noch länger.

    Gruß
    Stefan

  4. Michael

    Hi !
    irgendwo habe ich gelesen (Ich meine Dirk Jesse hat es getwittert) das das mit dem trennen teilweise problematisch ist, wenn man einen Screenreader nutzt.
    Sobald ich den Artikel wiederfinde, schicke ich hier einen Link !

    Kann das sein? Muss ich also bei einem von beiden Sachen einen Kompromiss machen ?
    Trotzdem ist es natürlich ne gute Sache:-)

    Beste Grüße
    Michael

  5. Frater Tecum

    Hallo Vladimir,

    der Artikel war sehr hilfreich. Schon länger suche ich die Möglichkeit Wörter flexibel zu teilen. Du hast mir ­ aufgezeigt, welches mir zukünftig helfen wird.

    Hab Dank,

    Fratri

  6. James

    Ich habe mal für einen Text, der auf einer Webseite "im Zeitungsstil" (Blocksatz) dargestellt werden sollte, den Hyphenator genutzt und war recht zufrieden.
    – Javascript einbinden und starten
    – Text, der getrennt werden soll bekommt zusätzlich: class="hyphenate"
    Danach wird für die Texte, nach einem im Javascript festgelegtem Algorithmus, die Silbentrennung ermittelt und beim Erreichen des Endes "der Box" das letzte Wort getrennt.
    Die Ersteller des Javascriptes weisen darauf hin, dass die Trefferquote bei der Silbentrennung nicht hundertprozentig ist. Ich konnte bei meinem Text jedoch keine falsche Silbentrennung feststellen.

    Link: Hyphenator

  7. Pingback: 10 praktische Tools zum Bloggen mit WordPress: SEO, Google-News & Theme-Hacks | Berufebilder by Simone Janson

  8. Pingback: 10 praktische Tools zum Bloggen mit WordPress: SEO, Google-News & Theme-Hacks | B E R U F E B I L D E R - Simone Janson

  9. Björn

    Traumhaft!

    Vielen Dank, word-wrap ist mit sofortiger Wirkung in die Top Ten der liebsten CSS-Eigenschaften aufgenommen worden.

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!