Gestaltung mit CSS 3 Eigenschaften

Mit Cascading Style Sheets (CSS) lassen sich nicht nur Größen und Farben von Elementen einer Website bestimmen, sondern auch die Darstellung speziell von Texten beeinflussen. Bei der Gestaltung mit CSS 3 bietet sich nicht nur Möglichkeiten für den normalen Textumbruch, sondern man kann auch den Umbruch inmitten eines langen Wortes erzwingen:

p.wrap { word-wrap: break-word; }

Sollte ein Wort in dem Absatz mit der Klasse „wrap“ länger als die Breites des Absatz-Elements sein, kann die genannte Eigenschaft definiert werden und das Wort wird in zwei oder mehrere passende Teile geteilt. Diese CSS-Eigenschaft gehört zum CSS 3 Vorschlag des W3C (World Wide Web Consortium) und wird von allen aktuellen Browsern implementiert. Das Standardverhalten, bei dem ein zu langes Wort aus dem Element heraus fließt, wird mit dem Wert ‚normal’ erreicht. Der gesetzte Wert für die Eigenschaft ‚word-wrap’ wird außerdem an alle Kindelemente weitervererbt.

Selbst wenn die Worte an sich kurz genug sind, kann es bei langen Texten vorkommen, dass die Größe des umgebenden Elements nicht ausreicht oder nur ein Auszug angezeigt werden soll. Dabei kann die folgende Eigenschaft eingesetzt werden:

p.excerpt { text-overflow: ellipsis; }

Hierbei wird der Text im Absatz mit der Klasse „excerpt“ abgeschnitten, wenn er die Breite des umgebendes Elements überschreitet, und drei Auslassungspunkte (…) werden zusätzlich am Ende eingefügt. Dadurch wird dem Besucher der Website klar, dass er nur einen Teil des gesamten Textes vor Augen hat. Internet Explorer, Opera und Browser auf Webkit-Basis unterstützen diese Eigenschaft, aber haben sie teilweise unterschiedlich implementiert. Der Firefox ignoriert ‚text-overflow’ bisher komplett. Zudem gibt es bisher keine Bestrebungen des W3C, die Eigenschaft ‚text-overflow’ in den CSS-Standard aufzunehmen. Daher sollte diese Eigenschaft für eine neue Gestaltung von Websites nur bedingt in Frage kommen.