Text nach drei Zeilen abschneiden – line-clamp statt JavaScript

Eine Liste aus Vorschaukarten: Bild, Überschrift, zwei Sätze Text. Sieht gut aus — bis eine Beschreibung doppelt so lang ist wie die anderen und die Karte aus der Reihe ragt.

Der übliche Reflex ist, im Backend zu kürzen:

$vorschau = mb_substr($text, 0, 120) . '…';

Das funktioniert bei genau einer Bildschirmbreite. Auf dem Handy passen in 120 Zeichen vier Zeilen, auf dem großen Monitor anderthalb. Und mitten im Wort abgeschnitten wird es auch noch.

CSS kann das genauer

.karte-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

Drei Zeilen, dann … — und zwar gemessen an dem, was tatsächlich dargestellt wird. Wird die Karte schmaler, passt weniger Text in eine Zeile, aber es bleiben drei Zeilen. Genau das will man.

Warum die -webkit-Präfixe?

Die sehen nach altem Bastelcode aus und sind trotzdem der offizielle Weg: Alle heutigen Browser unterstützen genau diese Schreibweise, und sie ist inzwischen auch in den CSS-Standard aufgenommen worden. Die präfixlose Fassung line-clamp kommt nach und nach dazu — bis sie überall da ist, schreibe ich beides:

.karte-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

Eine Zeile? Dann geht es einfacher

Für eine Zeile braucht es das nicht:

.dateiname {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Das ist der ältere, schlichtere Weg — aber eben nur für einzeilige Beschriftungen, etwa Dateinamen in einer Tabelle.

Woran man denken sollte

Der Text ist noch da. Er wird nur nicht dargestellt. Für Suchmaschinen und Screenreader ist der vollständige Inhalt weiterhin vorhanden — was gut ist, wenn es um eine Vorschau geht, und schlecht, wenn du glaubst, damit etwas zu verbergen. Zum Verstecken taugt es nicht.

Die Höhe wird nur bei gleicher Zeilenhöhe gleich. Wenn eine Karte eine größere Schrift benutzt, sind drei Zeilen dort höher. In einem Grid mit align-items: stretch fällt das nicht auf, in einer Flexbox-Reihe schon.

Ein Titel darf ruhig zwei Zeilen bekommen. Ich setze fast immer -webkit-line-clamp: 2 auf die Überschrift und 3 auf den Text. Titel sind unterschiedlich lang, und eine Überschrift, die als einzige über drei Zeilen läuft, zerlegt das Raster genauso zuverlässig wie ein langer Fließtext.

Auf meinen Übersichtsseiten steckt genau diese Regel in jeder Karte — es ist eine der wenigen Stellen, an denen vier Zeilen CSS ein Layoutproblem vollständig erledigen, das sonst Servercode und Sonderfälle gekostet hätte.

Du hast eine Übersichtsseite, bei der die Kacheln unterschiedlich hoch sind? Meistens ist das in fünf Minuten erledigt. Melde dich.

Quellen

• MDN: -webkit-line-clamp
• MDN: text-overflow
• W3C: CSS Overflow Module Level 4 – line-clamp