CSS: truncate ​

.--truncate — Ellipsenabschneidung mit Zeilenbegrenzung gesteuert durch --lines — kann eigenständig oder an jede Komponente angehängt verwendet werden (.instui-button.--truncate).

Die Basisklasse verwendet display: -webkit-box und liest die Custom Property --lines, um Text auf eine feste Anzahl von Zeilen zu beschränken, bevor er mit einer Ellipse endet.

Source: index.ts

TIP

JS-Anforderung — Diese Komponente liefert kein eigenes CSS — Markup und Verhalten stammen vollständig von @pantoken/interactions. Ihr --max-lines-auto-Modifier wird von diesem Verhalten gesteuert. Siehe die Modifier-Tabelle unten.

Verwendung ​

css
@import "@pantoken/components/utilities.css";

Beispiele ​

html
<div class="--truncate">This text is clamped to one line by default and ends in an ellipsis.</div>
<div class="--truncate" style="--lines: 3">This text is clamped to three lines and ends in an ellipsis.</div>
<button class="instui-button --truncate">…</button>

Modifikatoren ​

ModifikatorBeschreibung
.--lines-1Alias von --max-lines-1.
.--lines-2Alias von --max-lines-2.
.--lines-3Alias von --max-lines-3.
.--lines-4Alias von --max-lines-4.
.--lines-5Alias von --max-lines-5.
.--max-lines-1Auf eine Zeile beschränken (Standard).
.--max-lines-2Auf zwei Zeilen beschränken.
.--max-lines-3Auf drei Zeilen beschränken.
.--max-lines-4Auf vier Zeilen beschränken.
.--max-lines-5Auf fünf Zeilen beschränken.
.--max-lines-autoInteraction — — Clamp to the number of lines that fit in the container, based on its height and the line height of the text.
.--truncateAktiviert Abschneidung und Zeilenbegrenzung auf dem Ziel-Element.
.--truncate-character(Standard) Auf Charakterebene abschneiden.
.--truncate-wordAuf Wortebene abschneiden.

Benutzerdefinierte Eigenschaften ​

EigenschaftTypStandardBeschreibung
--ellipsisclip | ellipsis | <string> | fadeellipsis—
--lines<integer>1—

Verbrauchte Tokens ​

TokenTypWert
--instui-component-truncate-text-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-line-height-paragraph-base<percentage>150%

Browser-Unterstützung ​

  • Begrenzung beruht auf -webkit-line-clamp mit display: -webkit-box, gepaart mit dem standardmäßigen line-clamp.

Verwandt ​

  • text — Body-Typografie, die hier abgeschnitten wird.