line-clamp

Die `line-clamp`-Eigenschaft kürzt Text auf eine bestimmte Anzahl von Zeilen.

Der Entwurf dazu ist derzeit ein Editor’s Draft, was bedeutet, dass nichts davon in Stein gemeißelt ist, da es sich um ein Werk im Gange handelt. Es wird als Kurzschreibweise für `max-lines` und `block-overflow` definiert, wobei ersteres als gefährdet eingestuft wird, in der Candidate Recommendation gestrichen zu werden.

Es ist leicht zu erkennen, wie `max-lines` gestrichen werden könnte, da seine Funktion (Festlegen der Anzahl der Zeilen vor dem Kürzen) bereits in `line-clamp` integriert ist und weitere Abstraktionen unnötig sein könnten. Aber das bringt uns vom Thema ab, also machen wir weiter.

Syntax

.module {
  line-clamp: [none | <integer>];
}

`line-clamp` akzeptiert die folgenden Werte im aktuellen Entwurf des Standards

• `none`: legt kein Maximum für die Anzahl der Zeilen fest und es wird folglich nicht gekürzt.
• `<integer>`: legt die maximale Anzahl von Zeilen fest, bevor der Inhalt gekürzt wird, und zeigt dann eine Auslassungspunkte (...) am Ende der letzten Zeile an.

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

Hey, kann ich das nicht mit `text-overflow` machen?

Gute Frage, mein Freund, und die Antwort ist, nun ja…

(Sehen Sie, was ich dort getan habe?)

…*sozusagen*.

`text-overflow` hat tatsächlich einen `ellipsis`-Wert, der Text kürzt

.truncate {
  text-overflow: ellipsis;

  /* Needed to make it work */
  overflow: hidden;
  white-space: nowrap;
}

Siehe Pen text-overflow 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 sagen wir, in der dritten Zeile des Textes einführen wollen?

Hier kommt `line-clamp` ins Spiel. Beachten Sie einfach, dass eine Kombination aus drei Eigenschaften verwendet wird, um dies zu erreichen

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

Siehe Pen line-clamp (-webkit) von Geoff Graham (@geoffgraham) auf CodePen.

Firefox unterstützt dies jetzt, *genau auf diese Weise* (mit den `-webkit-` Präfixen und allem Drum und Dran).

Also, was ist der Haken?

Derzeit ist es die Browserunterstützung. Line-Clamps sind Teil des CSS Overflow Module Level 3, das sich derzeit im Editor’s Draft befindet und derzeit überhaupt nicht unterstützt wird.

Wir können mit einem `-webkit-` Präfix etwas Line-Clamping erreichen (was seltsamerweise über alle gängigen Browser hinweg funktioniert). Tatsächlich wurde die obige Demo so gemacht.

Wir könnten uns auch für den JavaScript-Weg entscheiden, wenn wir wollen. Clamp.js wird den Trick machen

Siehe Pen line-clamp (clamp.js) von Geoff Graham (@geoffgraham) auf CodePen.

Browser-Unterstützung

Dies ist die Unterstützung für WebKits proprietäre und undokumentierte Implementierung von Line Clamp.

Additional Resources

• CSS Overflow Module Level 3 – Der Editor-Entwurf, in dem Line Clamp eingeführt wird
• Safari CSS Reference – Dokumentation für die nicht unterstützte WebKit-Implementierung
• Line Clampin’ (Truncating Multiple Line Text) – von Chris Coyier
• Clamp.js – eine JavaScript-Methode für browserübergreifende Unterstützung
• Pitfalls of Card UIs – Dave Rupert betrachtet die Gefahren der Kürzung von Text