Textkuerzung 1.2.0

Kuerze lange Texte mit Ellipse ueber .velin-truncate fuer eine Zeile oder .velin-line-clamp-{n} fuer mehrzeilige Begrenzung. English: text-truncation

Reifegrad: Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und dort beta / foundation, wo es vermerkt ist.

Wann verwenden

Kuerze einzeiligen Ueberlauf in dichten Tabellen oder Karten, wenn der vollstaendige Text an anderer Stelle verfuegbar ist.

Wann nicht verwenden

Kuerze keine wichtigen Anweisungen oder Fehlermeldungen.
Stelle sicher, dass Tastatur- und Assistive-Technology-Nutzer den vollstaendigen Text erreichen koennen.

Einzeilige Kuerzung

Dies ist ein sehr langer Text, der mit einer Ellipse gekuerzt wird, sobald er ueber das Container-Element hinauslaeuft.

<p class="velin-truncate" style="max-width: 250px">
  Dies ist ein sehr langer Text, der gekuerzt wird...
</p>

Mehrzeilige Begrenzung

Nutze .velin-line-clamp-2, .velin-line-clamp-3 usw., um sichtbare Zeilen zu begrenzen.

Dieser laengere Beispieltext zeigt, wie zwei sichtbare Zeilen erhalten bleiben und der restliche Inhalt optisch begrenzt wird.

Dieser noch laengere Beispieltext zeigt eine dreizeilige Begrenzung fuer Karten, Listen und kompakte Inhaltsbereiche, in denen die Hoehe stabil bleiben soll.

<p class="velin-line-clamp-2">Langer Text...</p>
<p class="velin-line-clamp-3">Noch laengerer Text...</p>