CSS line-clamp • Anzahl der Zeilen beschränken

CSS text-overflow

line-clamp kürzt Texte auf eine bestimmte Zahl von Zeilen und setzt am Ende der letzten angezeigten Zeile drei Fortsetzungspunkte (). Sinnvoll, um das Raster im Layout einzuhalten, die Kurzbeschreibung von Blogbeiträgen konsistent in Spalten einzusetzen oder kleine Tabellen übersichtlich zu halten.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Zeilen abschneiden

line-clamp begrenzt die Zahl der Zeilen in einem Block, der Text bleibt dabei vollkommen erhalten und wird nicht gekappt. Das Kürzen von Texten mit line-clamp ist z.B. sinnvoll in einem Raster von gleichartigen Blöcken (typischerweise bei der Übersichtsseite eines Blogs).

.clamped {
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical; 
}
<p class="clamped">Die Stadt Göttingen, berühmt durch …</p>

Im Grunde genommen ist line-clamp also eine Erweiterung von text-overflow. 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.

3

Die Stadt Göttingen, berühmt durch ihre Würste und Universität, gehört dem Könige von Hannover, und enthält 999 Feuerstellen, diverse Kirchen, eine Entbindungsanstalt, eine Sternwarte, einen Karzer, eine Bibliothek und einen Ratskeller, wo das Bier sehr gut ist.
Der vorbeifließende Bach heißt »die Leine«, und dient des Sommers zum Baden; das Wasser ist sehr kalt und an einigen Orten so breit, daß Lüder wirklich einen großen Anlauf nehmen mußte, als er hinübersprang.

Aus: Heinrich Heine Die Harzreise

Alle modernen Browser, nicht IE11 (warum schreibe ich das bloß immer wieder dazu?), und alle Browser (auch Firefox) mit -webkit-Präfix ansprechen!

line-clamp – was nicht funktioniert

line-clamp wirkt nur direkt auf ein Element, im vorangegangenen Beispiel direkt auf das p-Element. Keine Wirkung würde line-clamp auf ein ul-Element haben: Die Zahl der li-Elemente unterhalb des ul-Elements bleibt unbeeindruckt. Erst ein line-clamp für die li-Elemente würde die Zeilen begrenzen.

  • Leonard Cohen
    First we take Manhattan
  • Kamasi Washington
    How to tame lions
  • Woodkit
    Que Te Mate el Desierto
  • Rolling Stones
    Paint it Black

Wenn der Abstand zwischen dem Text zum umgebenden Block durch padding gehalten wird, stimmt die Zahl der Zeilen nicht mehr: Zeilen werden mitten drin abgeschnitten.

Die Stadt Göttingen, berühmt durch ihre Würste und Universität, gehört dem Könige von Hannover, und enthält 999 Feuerstellen, diverse Kirchen, eine Entbindungsanstalt, eine Sternwarte, einen Karzer, eine Bibliothek und einen Ratskeller, wo das Bier sehr gut ist.
Der vorbeifließende Bach heißt »die Leine«, und dient des Sommers zum Baden; das Wasser ist sehr kalt und an einigen Orten so breit, daß Lüder wirklich einen großen Anlauf nehmen mußte, als er hinübersprang.

padding vergrößert die Box, aber die Browser berechnen line-clamp erst nach dem padding. Unschön wäre es, wenn für alle geklammerten und gekappten Texte ein Wrapper-Element eingesetzt werden müsste. Eine mögliche Lösung wäre border anstelle von padding – nicht gerade elegant.

.clamped {
	border: 1em solid transparent;
	max-width: 440px;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical; 
}