CSS3 text-overflow und word-wrap: Text beschneiden oder Wörter umbrechen

Mittwoch, 31 März 2010 23:44 MET

Thema:
Webgestaltung, Ausgewählte Artikel  
Stichworte:
,  
 
Donaudampfschifffahrtsgesellschaftskapitän (Beispiel als Screenshot)
CSS3 text-overflow und word-wrap: Text beschneiden oder Wörter umbrechen [hyperkontext | Weblog]
Bezugnahme 1

Word-Wrap stammt ursprünglich vom IE (Internet Explorer). Mittlerweile unterstützen ausnahmslos alle gängigen Browser diese einfache Anweisung, die zu lange Wörter in die nächste Zeile umbricht.

Auch eine ehemals proprietäre CSS-Anweisung des IE seit Version 5.5 ist text-overflow:ellipsis. Damit kann die Fortsetzung eines abgeschnittenen Textes mit einem Auslassungszeichen signalisiert werden. Die Übernahme in den CSS3-Standard scheint allerdings nicht so sicher.

Zu lange Wörter umbrechen lassen

Vor einigen Tagen wurde einige Male die CSS-Anweisung word-wrap behandelt. Damit können zu lange Zeichenfolgen, etwa eine lange URL, in die nächste Zeile umbrechen.

Word-Wrap stammt ursprünglich vom IE (Internet Explorer), der das schon seit Version 5.5 unterstützt. Im letzten Entwurf (2007) zum CSS3-Textmodul (per Datum dieses Textes 2010-03-31) soll word-wrap nun als CSS3-Standard übernommen werden und es scheint so, als ob das auch tatsächlich passieren wird.

Mittlerweile unterstützen ausnahmslos alle gängigen Browser – auch Opera seit Version 10.10 – diese einfache Anweisung:


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

Aus Kompatibilitätsgründen wird in dem Zusammenhang auch auf eine Cross-Browser-Lösung für Word-Wrap verwiesen, die auch ältere Versionen einschließen sollte.

Da aber die Verbreitung älterer Versionen von Firefox und Opera – im Gegensatz zu IE – immer sehr zügig gegen 0 schreitet, halte ich den den Einsatz dieses Schnipsels für nicht notwendig. Zusätzlich sei noch angemerkt, dass Opera 9 bis 10.0 weder mit den proprietären Angaben für Version 7, noch mit den aktuellen etwas anfängt.

Sinnvoller ist vermutlich overflow:hidden oder overflow:auto noch zusätzlich anzubringen, um generell für ältere Ausgabeprogramme eine Notlösung anzubieten.

Da dies noch kein offizieller Standard ist, werden auch Validatoren für CSS3 unter Umständen eine Fehlermeldung ausgeben. Wen das stört, der sollte diese Anweisung nicht verwenden.

Der praktische Einsatz ist sowieso nur dafür gedacht, Auswüchse aus User-Generated-Content im sichtbaren Rahmen zu halten.

Für Silbentrennungen in Fließtexten verweise ich auf einen älteren Beitrag von mir: Silbentrennung und bedingter Zeilenumbruch in HTML-Dokumenten.

Text beschneiden mit … Auslassungszeichen

Auch eine ehemals proprietäre CSS-Anweisung des IE seit Version 5.5 ist text-overflow:ellipsis. Damit kann die Fortsetzung eines abgeschnittenen Textes mit einem Auslassungszeichen (Ellipsis) signalisiert werden.

Hier liegt die Sache allerdings nicht so eindeutig. Die tatsächliche Übernahme von text-overflow in den CSS3-Standard scheint nicht so sicher.

Bis auf den Firefox unterstützen aber alle gängigen Browser nunmehr die Methode.

Beispiel:


.kurzklasse {
overflow: hidden;  
text-overflow: ellipsis;  
-o-text-overflow: ellipsis; /*für Opera*/ 
white-space: nowrap;  
width: 100%;
} 

Ich habe 2 Möglichkeiten gefunden, wie das nun auch dem Firefox beigebracht werden kann:

  1. Über ein jQuery-Plugin via Javascript: Using ellipsis with HTML and CSS [Electric Toolbox]. Es gibt sicher noch einige andere JS-Lösungen hierfür.
  2. Ein Entwickler von mint.com stellte eine äußerst reizvolle Methode via XUL (Mozillas XML User Interface Language) vor: CSS String Truncation with Ellipsis [MattSnider].

Da es nicht sicher ist, ob text-overflow nun tatsächlich in CSS3 aufgenommen wird, könnte aber die Anweisung aus zukünftigen Browser-Versionen wieder verschwinden.

Ich halte diese Kürzungen via CSS eher für Ausnahmefälle. Üblicherweise wird der Text durch ein serverseitiges Script bearbeitet und bereits gekürzt mit Ellipsis ausgeliefert oder clientseitig per Javascript aufbereitet.

Abschnitt 1 von 1

Externe Verweise dieses Artikels wurden zuletzt am 31. März 2010 auf Relevanz geprüft.

Datum:
veröffentlicht am 31 März 2010, 23:44 MET.
Artikel:
CSS3 text-overflow und word-wrap: Text beschneiden oder Wörter umbrechen [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/254
Thema:
Webgestaltung, Ausgewählte Artikel 
Stichworte:
,  
Reaktionen:
Bezugnahme 1

externe Bezugnahmen (1) ansehen

Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

älterer Artikel »
CSS :target – Tab-Navigation aus Sprunglinks in Überschriften