CSS text-overflow

CSS text-overflow

Wenn ein Wort zu lang für den umfassenden Block ist, dehnt er den Block oder wird abgeschnitten und u.U. das unleserlich. text-overflow kürzt überlange Wörter mit Kennzeichnung, und kann zudem überlange Texte auf eine Zeile kürzen.

Vor allem in den Navigationselementen dynamischer Inhalte führen überlange Wörter oder ein zu langer Text zu einem Bruch des Layouts. overflow:hidden beschränkt den Text zwar auf die Maße des umfassenden Blocks, aber schneidet dabei mitten durch die Zeichen.

Die Auslassungspunkte zeigen meist an, dass der Text an anderer Stelle vollständig vorhanden ist – z.B. in den Links von Navigationslementen oder einem »Mehr dazu«.

Trompetenbaum-Blattkrone
  1. Überlanger Text ohne Beschränkung
  2. Überlanger Text mit Beschränkung durch overflow: hidden

CSS3 text-overflow

Damit der Leser erkennt, dass ein Text gekürzt ist, zeigt text-overflow: ellipsis die Kürzung durch drei Auslassungspunkte (Hellip, auch Ellipse) an.

  • width height Breite und Höhe von Blöcken
  • calc Breite / Höhe berechnen
  • min-height, max-height • Höhe begrenzen
  • min-width, max-width • Breite begrenzen
  • visibility Sichtbar / versteckt
  • overflow • Anzeige übergroße Inhalte

white-space: nowrap beschränkt den Text auf eine Zeile. Wenn die Eigenschaft white-space : nowrap fehlt, wird der Text umgebrochen und vollständig angezeigt, aber der Browser kürzt überlange Wörter wie Trompetenbaum-Blattkronen und das Layout steht. Praktisch und sinnvoll für Navigationsleisten.

.textoverflow li { 
  width:48%;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}

text-overflow wird von allen Browser unterstützt, auch von älteren Versionen von IE

Auslassungszeichen

Das Auslassungszeichen … ellipse setzt drei Punkte in die Breite eines Zeichens –. Frankreich und Spanien hingegen nutzen drei einzelne Punkte als Auslassungszeichen (points de suspension). text-overflow sieht auch eigene Angaben als Signal der Kürzung vor.

text-overflow:'...';
oder
text-overflow:' *** ';
Trompetenbaum-Blattkrone

Da spielt aber nur Firefox mit. Also bei text-overflow:ellipsis bleiben …

icon vertical scroll