CSS: truncate

.--truncate — Ellipsis-afkortning med linjeafklemning styret af --lines — kan bruges alene eller kædes på enhver komponent (.instui-button.--truncate).

Basis-klassen bruger display: -webkit-box og aflæser den brugerdefinerede egenskab --lines for at afklemme tekst til et fast antal linjer, før den ender i en ellipse.

Source: index.ts

TIP

JS-krav — Denne komponent leverer ingen egen CSS — dens markup og adfærd kommer udelukkende fra @pantoken/interactions. Dens --max-lines-auto-modifier styres af den adfærd. Se modifier-tabellen nedenfor.

Brug

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

Eksempler

<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>

Modifikatorer

Modifikator	Beskrivelse
.--lines-1	Alias til --max-lines-1.
.--lines-2	Alias til --max-lines-2.
.--lines-3	Alias til --max-lines-3.
.--lines-4	Alias til --max-lines-4.
.--lines-5	Alias til --max-lines-5.
.--max-lines-1	Afklem til én linje (standard).
.--max-lines-2	Afklem til to linjer.
.--max-lines-3	Afklem til tre linjer.
.--max-lines-4	Afklem til fire linjer.
.--max-lines-5	Afklem til fem linjer.
.--max-lines-auto	Interaction — — Clamp to the number of lines that fit in the container, based on its height and the line height of the text.
.--truncate	Aktiverer afkortning og linjeafklemning på mål-elementet.
.--truncate-character	(standard) Afkort ved tegnniveau.
.--truncate-word	Afkort ved ordniveau.

Brugerdefinerede egenskaber

Egenskab	Type	Standard	Beskrivelse
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Forbrugte tokens

Token	Type	Værdi
--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%

Browserunderstøttelse

• Afklemning afhænger af -webkit-line-clamp med display: -webkit-box, parret med standard line-clamp.

Relateret

• text — Brødteksttypografi, som dette forkorter.