block-overflow

Die Eigenschaft block-overflow kürzt Text und zeigt durch das Einfügen von Auslassungspunkten oder einer benutzerdefinierten Zeichenfolge nach einer durch die Eigenschaft max-lines festgelegten Anzahl von Zeilen an, dass weiterer Inhalt folgt.

Die Eigenschaft wurde im Editor's Draft der CSS Overflow Module Level 3 Spezifikation eingeführt. Das bedeutet, dass sie derzeit experimentell ist und als Arbeit in Bearbeitung gilt. Tatsächlich können Sie die Konversation verfolgen, die auch Diskussionen über die Umbenennung der Eigenschaft enthält.

Syntax

.module {
  block-overflow: [clip | ellipsis | ];
  max-lines: []; /* required by block-overflow */
}

block-overflow akzeptiert die folgenden Werte

• clip: Fügt kein Zeichen ein, um anzuzeigen, dass mehr Text folgt. Stattdessen wird der Inhalt lediglich gekürzt und beim letzten Zeichen abgeschnitten.
• ellipsis: Zeigt am Ende der letzten Zeile Auslassungspunkte (...) an. Dies sollte als Unicode-Zeichen (U+2026) gerendert werden, könnte aber durch ein Äquivalent ersetzt werden, das auf der Inhaltssprache und dem Schreibmodus des verwendeten User-Agents basiert.
• <string>: Zeigt benutzerdefinierten Text (z. B. „Mehr lesen →“) am Ende der letzten Zeile an. Die Spezifikation besagt, dass der User-Agent die Zeichenfolge durch Auslassungspunkte ersetzen kann, wenn die Zeichenfolge „absurd“ lang ist.

Auch hier handelt es sich um experimentelle Arbeit in Bearbeitung. Diese Werte könnten sich ändern. Oder es könnten weitere hinzugefügt werden. Zum Beispiel gab es Forderungen nach „intelligenteren“ Auslassungspunkten, die mehr Dinge tun könnten, wie z. B. Text in der Mitte beschneiden.

One thing led to another and 
... 
yada yada yada, that was that.

Verwenden Sie line-clamp für kurze Texte

Wir können fast dasselbe erreichen, indem wir line-clamp verwenden, was eine Kurzschreibweise für die Eigenschaften block-overflow und max-lines ist.

So wie sie derzeit definiert ist, akzeptiert line-clamp jedoch nur einen einzelnen numerischen Wert für max-lines und setzt block-overflow implizit auf den Wert ellipsis. Wenn Sie also eine benutzerdefinierte Zeichenfolge für die Kürzung verwenden möchten, müssen Sie die Langform verwenden.

Browser-Unterstützung

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

Weitere Informationen

• CSS Overflow Module Level 3 – Der Editor-Entwurf, 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