max-lines

Die Eigenschaft max-lines begrenzt den Inhalt eines Blocks auf eine maximale Anzahl von Zeilen, bevor er abgeschnitten wird, und kann in Kombination mit block-overflow einen Zeilenabschneide-Effekt erzeugen. Tatsächlich machen beide Eigenschaften die Eigenschaft line-clamp aus, die eine Kurzschreibweise für die Kombination beider ist.

Es ist an dieser Stelle erwähnenswert, dass die Spezifikation, die max-lines einführt, derzeit im Editor's Draft ist, sodass alles, worüber wir hier sprechen, sich ändern kann, da es sich um ein Arbeitspapier handelt. Die Spezifikation merkt sogar an, dass diese Eigenschaft Gefahr läuft, während der Candidate Recommendation gestrichen zu werden. Das heißt aber nicht, dass die Idee einfach verschoben werden und in einer anderen Entwurfsperiode wieder auftauchen könnte.

Syntax

.module {
  max-lines: [none | <integer>];
}

max-lines akzeptiert die folgenden Werte

• none: Es wird keine maximale Anzahl von Zeilen festgelegt und der gesamte Inhalt wird gerendert.
• <integer>: Die Anzahl der Zeilen, bevor der Inhalt verworfen wird. Nur positive Ganzzahlen werden akzeptiert. Negative Werte werden verworfen und führen dazu, dass die Eigenschaft ignoriert wird.

Die Spezifikation merkt an, dass der ganzzahlige Wert der Eigenschaft animiert werden kann. Obwohl wir aufgrund mangelnder Browserunterstützung keine Demo haben, könnte dies eine interessante Möglichkeit sein, einen Effekt des Verbergens oder Zeigens von mehr Inhalt durch Benutzerinteraktionen zu erzeugen.

Die Eigenschaft für die Begrenzung sichtbarer Zeilen

Die Spezifikation beschreibt max-lines als „Begrenzung sichtbarer Zeilen“, und das liegt daran, dass der Inhalt, der innerhalb der maximalen Zeilenanzahl liegt, sichtbar bleibt, während der Rest „weder gerendert noch gemessen“ wird. Mit anderen Worten, der Inhalt, der außerhalb der maximalen Zeilenanzahl liegt, wird vom Browser überhaupt nicht gerendert, ähnlich wie wenn der Inhalt auf display: none; gesetzt wäre.

Die Spezifikation beschreibt weiter den Inhalt, der von max-lines abgeschnitten wird, als Fragmente: ein Fragment, das sichtbar gerendert wird, und ein weiteres Fragment, das nicht gerendert und außer Sicht ist. Was daraus folgt, könnte sich wie die Handlung von Matrix anfühlen, da die Box, die den Inhalt enthält, zu einem „Fragmentierungscontainer“ wird, der dieses fragmentierte Stück (jetzt als <"Region Break“ bekannt) erfasst und speichert und es an eine andere Box weitergeben kann, wenn es Teil einer CSS Region ist.

Stellen Sie es sich wie eine alte Zeitungszeitung vor, bei der die Artikel auf der Seite in Spalten aufgeteilt sind. Wenn wir max-lines für eine Spalte festlegen und diese Spalte eine weitere Spalte daneben hat, die Teil desselben Artikels ist, dann kann der Restinhalt der ersten Spalte direkt in die nächste fließen.

Browser-Unterstützung

Derzeit keine, aber Sie können mit der proprietären Implementierung von line-clamp von WebKit etwas Unterstützung erhalten.

Verwandte Eigenschaften

• block-overflow
• line-clamp

Additional Resources

• CSS Overflow Module Level 3 – Der Editor's Draft, in dem block-overflow 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