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;
display: -webkit-box;
-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.
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.
Alle modernen Browser, nicht IE11 (warum schreibe ich das bloß immer wieder dazu?), und alle Browser (auch Firefox) mit -webkit-Präfix ansprechen!
display: -webkit-box
Für line-clamp wird zusätzlich die -webkit-box-Eigenschaft verwendet, um den Container ins Blockformat zu zwingen. Dafür ist text-overflow: ellipsis in line-clamp sozusagen schon drin.
Eigentlich war display: -webkit-box der Vorläufer von display: flex und ursprünglich dazu gedacht, um Text in einer Box auf eine bestimmte Zahl von Zeilen zu beschränken. Eine wirklich standardisierte Version von line-clamp gibt es nicht.
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;
}
Minimale Zahl von Zeilen
CSS hat keine direkte Möglichkeit, die minimale Zahl von Zeilen festzulegen, sondern braucht eine Kombination verschiedener Eigenschaften.
Um etwa eine Reihe von Überschriften in drei Spalten immer auf die selbe Höhe zu setzen, wäre eine bestimmte Höhe oder min-height für die Überschriften. Dazu käme overflow: hidden und text-overflow: ellipsis, damit längere Überschriften abgeschnitten werden. Das ist aber nicht so exakt wie line-clamp.
Sicherheit erreicht in dieser Situation nur line-clamp:1, das den Überschriften nur eine Zeile zugesteht.
