CSS: truncate

.--truncate — skrajšanje z elipsami z zaklepanjem vrstic, nadzorovano z --lines — uporabno samostojno ali pridruženo katerikoli komponenti (.instui-button.--truncate).

Osnovni razred uporablja display: -webkit-box in bere pogojno lastnost --lines, da omeji besedilo na določeno število vrstic, preden se konča z elipso.

Source: index.ts

TIP

Zahteva JS — Ta komponenta ne vsebuje lastnega CSS — njena struktura in vedenje izhajata v celoti iz @pantoken/interactions. Njena modifikatorja --max-lines-auto poganja to vedenje. Glej tabelo modifikatorjev spodaj.

Uporaba

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

Primeri

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

Spremenljivke (modifikatorji)

Modifikator	Opis
.--lines-1	Vzdevek za --max-lines-1.
.--lines-2	Vzdevek za --max-lines-2.
.--lines-3	Vzdevek za --max-lines-3.
.--lines-4	Vzdevek za --max-lines-4.
.--lines-5	Vzdevek za --max-lines-5.
.--max-lines-1	Omeji na eno vrstico (privzeto).
.--max-lines-2	Omeji na dve vrstici.
.--max-lines-3	Omeji na tri vrstice.
.--max-lines-4	Omeji na štiri vrstice.
.--max-lines-5	Omeji na pet vrstic.
.--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	Omogoči skrajšanje in zaklepanje vrstic na ciljnem elementu.
.--truncate-character	(privzeto) Skrajšaj na ravni znakov.
.--truncate-word	Skrajšaj na ravni besed.

Lastnosti po meri

Lastnost	Tip	Privzeto	Opis
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Porabljeni žetoni

Token	Tip	Vrednost
--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%

Podpora brskalnika

• Zaklepanje vrstic temelji na -webkit-line-clamp z display: -webkit-box, v kombinaciji s standardnim line-clamp.

Sorodno

• text — telesna tipografija, ki jo to skrajša.