CSS: truncate

.--truncate — Torrwch elipsis gyda chlymwch llinell a reolir gan --lines — yn ddefnyddiol fel un unigol neu wedi’i gadwynu ar unrhyw gydran (.instui-button.--truncate).

Mae’r dosbarth sylfaenol yn defnyddio display: -webkit-box ac yn darllen y priodoledd arfer --lines i gloi testun i nifer sefydlog o linellau cyn iddo ddod i ben mewn elipsis.

Source: index.ts

TIP

Gofyniad JS — Nid yw’r gydran hon yn cynnwys CSS ei hun — mae ei farc-ap a’i hymddygiad yn deillio’n gyfan o @pantoken/interactions. Caiff ei fodyffiwr --max-lines-auto ei lywio gan y ymddygiad hwnnw. Gweler y modifier table below.

Defnydd

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

Enghreifftiau

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

Modyfiwyr

Modyfiwr	Disgrifiad
.--lines-1	Alias o --max-lines-1.
.--lines-2	Alias o --max-lines-2.
.--lines-3	Alias o --max-lines-3.
.--lines-4	Alias o --max-lines-4.
.--lines-5	Alias o --max-lines-5.
.--max-lines-1	Cloi i un llinell (diofyn).
.--max-lines-2	Cloi i ddwy llinell.
.--max-lines-3	Cloi i dri llinell.
.--max-lines-4	Cloi i bedwar llinell.
.--max-lines-5	Cloi i bump llinell.
.--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	Yn galluogi torri a chloi llinellau ar yr elfen darged.
.--truncate-character	(diofyn) Torrwch ar lefel nodau.
.--truncate-word	Torrwch ar lefel geiriau.

Priodweddau arferiad

Eiddo	Math	Diofyn	Disgrifiad
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Tocynnau a ddefnyddiwyd

Token	Math	Gwerth
--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%

Cefnogaeth porwr

• Mae’r cloi yn dibynnu ar -webkit-line-clamp gyda display: -webkit-box, wedi’i bartneru â’r safonol line-clamp.

Perthnasol

• text — Teipograffi’r corff y mae hyn yn ei thorri.