CSS: truncate

.--truncate — Ettpunktsavkorte med linjeavgrensing styrt av --lines — kan brukast åleine eller lenkjast på ein komponent (.instui-button.--truncate).

Basisklassen brukar display: -webkit-box og les den tilpassa eigenskapen --lines for å avgrense tekst til eit fast tal linjer før han endar i ein ellips.

Source: index.ts

TIP

JS-krav — Denne komponenten leverer ingen eiga CSS — oppmerkinga og åtferda kjem heilt frå @pantoken/interactions. Modifikatoren --max-lines-auto blir driven av den åtferda. Sjå modifikatortabellen nedanfor.

Bruk

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

Døme

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

Modifikatorar

Modifikator	Skildring
.--lines-1	Alias for --max-lines-1.
.--lines-2	Alias for --max-lines-2.
.--lines-3	Alias for --max-lines-3.
.--lines-4	Alias for --max-lines-4.
.--lines-5	Alias for --max-lines-5.
.--max-lines-1	Avgrens til éi linje (standard).
.--max-lines-2	Avgrens til to linjer.
.--max-lines-3	Avgrens til tre linjer.
.--max-lines-4	Avgrens til fire linjer.
.--max-lines-5	Avgrens 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 avkorting og linjeavgrensing på mål-elementet.
.--truncate-character	(standard) Avkort på teiknnivå.
.--truncate-word	Avkort på ordnivå.

Tilpassa eigenskapar

Eigenskap	Type	Standard	Skildring
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Token brukt

Token	Type	Verdi
--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%

Nettlesarstøtte

• Linjeavgrensing byggjer på -webkit-line-clamp med display: -webkit-box, kombinert med den standard line-clamp.

Relatert

• text — Brødteksttypografi som dette avkortar.