CSS: truncate

.--truncate — Tronkman ak elips ak plafon liy kontwole pa --lines — itil swa poukont li oswa chèn sou nenpòt konpozan (.instui-button.--truncate).

Klas baz la itilize display: -webkit-box epi li li pwopriyete koutim --lines pou plafone tèks la nan yon kantite liy fiks anvan li fini ak elips.

Source: index.ts

TIP

Egzijans JS — Konpozan sa a pa voye okenn CSS pa li menm — makaj li ak konpòtman li sòti nèt nan @pantoken/interactions. Modifikatè --max-lines-auto li a kondwi pa konpòtman sa a. Gade modifier table below.

Itilizasyon

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

Egzanp

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

Modifikatè

Modifikatè	Deskripsyon
.--lines-1	Alias pou --max-lines-1.
.--lines-2	Alias pou --max-lines-2.
.--lines-3	Alias pou --max-lines-3.
.--lines-4	Alias pou --max-lines-4.
.--lines-5	Alias pou --max-lines-5.
.--max-lines-1	Plafone nan yon sèl liy (pa defo).
.--max-lines-2	Plafone nan de liy.
.--max-lines-3	Plafone nan twa liy.
.--max-lines-4	Plafone nan kat liy.
.--max-lines-5	Plafone nan senk liy.
.--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	Pèmèt tronkaj ak plafon liy sou eleman sib la.
.--truncate-character	(pa defo) Tronke pa karaktè.
.--truncate-word	Tronke pa mo.

Pwopriyete koutim

Pwopriyete	Tip	Pa defo	Deskripsyon
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Tokens konsome

Token	Tip	Valè
--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%

Sipò navigatè

• Plafon an depann sou -webkit-line-clamp ak display: -webkit-box, konbine ak estanda line-clamp.

Ki gen rapò

• text — Tipografi kò a ke sa a tronke.