201030Mär

CSS: Lange Zeilen mit word-wrap umbrechen

Gestern bin ich auf einen Artikel bei Web Designer Wall gestoßen, in dem eine einfache Möglichkeit vorgestellt wird, mit der sich per CSS auch längere Zeilen umbrechen lassen. Im Normalfall werden Texte an ganzen Wörtern umgebrochen, so dass es oft zu Problemen kommen kann, wenn längere Wörter oder Links verwendet werden. Diese Situation tritt nur auf, wenn das Elternelement eine feste Breite besitzt. Jedem dürfte die dazugehörige CSS-Tasse bekannt sein.
Ein Workaround wäre die Verwendung von "overflow:hidden;" auf dem Elternelement. Dadurch wird der Text allerdings komplett abgeschnitten und Informationen würden verloren gehen.
In dem Artikel bei Web Designer Wall wird schließlich der CSS-Wert "break-word" für das Attribut "word-wrap" vorgestellt, mit dem sich Texte an Wörtern bzw. Buchstaben umbrechen lassen.

CSS Word-Wrap

Dadurch lässt sich das Problem von langen Texten zumindest einschränken. Interessant war ein Kommentar zu dem Beitrag, der auf eine Cross-Browser-Lösung für das Attribut verweist. Hier wird die Eigenschaft "white-space" in Verbindung mit dem CSS3-Wert "pre-wrap" verwendet.
Wer hingegen eine intelligente Silbentrennung ausprobieren möchte, sollte sich das Hyphenator-Skript ansehen.

RSS-Feed abonnieren

Kommentare

Don schrieb am 01.04.2010 #1

ja, der Tip ist nicht schlecht.
Auch das PlugIn scheint ganz gut zu sein.
Man sieht es ja manchmal das die Elefantenlinks rausragen :)