Langen Text 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«.
- Überlanger Text ohne Beschränkung
- Überlanger Text mit Beschränkung durch overflow: hidden
text-overflow ellipsis
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;
}
Bei Kurzfristenergieversorgungssicherungsmaßnahmenverordnung-EnSikuMaV (Energiespar-Gesetz) hilft dann auch text-overflow nicht.
text-overflow wird von allen Browser unterstützt, auch von älteren Versionen von IE.
ellipsis – Auslassungszeichen
Das Auslassungszeichen … ellipsis 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:' *** ';
Da spielt aber nur Firefox mit und obendrein mosert der Validator. Also bei text-overflow:ellipsis bleiben …
line-clamp – Zeilen begrenzen
line-clamp begrenzt die Zahl der Zeilen in einem Textblock. line-clamp: 1 ist im Grunde genommen das neue text-overflow.
.clamped {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Elementar: Genauso wie text-overflow braucht auch line-clamp die Eigenschaft overflow: hidden und muss in Kombination mit display: -webkit-box gesetzt werden. Ohne weitere Angaben endet die letzte Zeile mit einem Auslassungszeichen (Ellipsis – drei Punkte). Wenn der Text zu kurz ist, um die gewünschte Zahl von Zeilen zu erreichen, wird er in voller Länge und mit weniger Zeilen angezeigt.
