Schnurklemme - CSS-Tricks | CSS-Almanach 2025

Die line-clampEigenschaft schneidet Text in einer bestimmten Anzahl von Zeilen ab.

Die Spezifikation dafür ist derzeit ein Editor's Draft, was bedeutet, dass hier nichts in Stein gemeißelt ist, da es sich um eine laufende Arbeit handelt. Das heißt, es ist als Abkürzung für max-linesund definiert block-overflow, wobei die erstere in der Kandidatenempfehlung als gefährdet eingestuft wird.

Es ist leicht zu erkennen, wie max-linesdies nicht funktioniert, da die Funktion (Festlegen der Anzahl der Zeilen vor dem Abschneiden) bereits integriert ist line-clampund eine weitere Abstraktion möglicherweise nicht erforderlich ist. Aber das bringt uns aus der Bahn, also lasst uns weitermachen.

Syntax

.module ( line-clamp: (none | ); )

line-clamp akzeptiert die folgenden Werte im aktuellen Entwurf der Spezifikation:

none: legt kein Maximum für die Anzahl der Zeilen fest und es kommt daher zu keiner Kürzung.
: Legt die maximale Anzahl von Zeilen fest, bevor der Inhalt abgeschnitten wird, und zeigt dann am Ende der letzten Zeile ein Auslassungszeichen (…) an.

Diese Auslassungspunkte sollten als Unicode-Zeichen (U + 2026) gerendert werden, können jedoch durch ein Äquivalent ersetzt werden, das auf der Inhaltssprache und dem Schreibmodus des verwendeten User-Agent basiert.

Hey, kann ich das nicht mit Textüberlauf machen?

Faire Frage, mein Freund, und die Antwort ist, na ja ...

(Siehst du was ich dort gemacht habe?)

... irgendwie.

text-overflowhat in der Tat einen ellipsisWert, der Text abschneidet:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Siehe den Stifttextüberlauf von Geoff Graham (@geoffgraham) auf CodePen.

Schön schön, das ist ein guter Anfang. Aber was ist, wenn wir die Auslassungspunkte nicht in der ersten Zeile, sondern irgendwo, beispielsweise in der dritten Textzeile, einführen möchten?

Hier line-clampkommt das Spiel ins Spiel. Beachten Sie nur, dass eine Kombination von drei Eigenschaften verwendet wird, um dies zu erreichen:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Siehe die Pen Line-Clamp (-webkit) von Geoff Graham (@geoffgraham) auf CodePen.

Firefox unterstützt dies jetzt genau so (mit den -webkit-Präfixen und allen).

Also, was ist der Haken?

Ab sofort ist es Browser-Unterstützung. Leitungsklemmen sind Teil des CSS-Überlaufmoduls Level 3, das sich derzeit im Editor's Draft befindet und derzeit nicht unterstützt wird.

Wir können eine Zeilenklemmaktion mit einem -webkit-Präfix ausführen (was seltsamerweise in allen gängigen Browsern funktioniert). Genau so wurde die obige Demo gemacht.

Wir könnten den JavaScript-Pfad entlang gehen, wenn wir möchten. Clamp.js macht den Trick:

Siehe die Pen Line-Clamp (clamp.js) von Geoff Graham (@geoffgraham) auf CodePen.

Browser-Unterstützung

Dies ist die Unterstützung für die Richtigkeit und undokumentierte Implementierung von Line Clamp durch WebKit.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.