CSS: truncate

.--truncate — Truncament amb punts suspensius amb tall per línies controlat per --lines — apte per usar sol o encadenat a qualsevol component (.instui-button.--truncate).

La classe base usa display: -webkit-box i llegeix la propietat personalitzada --lines per limitar el text a un nombre fix de línies abans que acabi amb punts suspensius.

Source: index.ts

TIP

Requisit JS — Aquest component no inclou CSS propi — la seva marca i comportament provenen íntegrament de @pantoken/interactions. El seu modificador --max-lines-auto està governat per aquest comportament. Vegeu la taula de modificadors a continuació.

Ús

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

Exemples

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

Modificadors

Modificador	Descripció
.--lines-1	Àlies de --max-lines-1.
.--lines-2	Àlies de --max-lines-2.
.--lines-3	Àlies de --max-lines-3.
.--lines-4	Àlies de --max-lines-4.
.--lines-5	Àlies de --max-lines-5.
.--max-lines-1	Limitar a una línia (per defecte).
.--max-lines-2	Limitar a dues línies.
.--max-lines-3	Limitar a tres línies.
.--max-lines-4	Limitar a quatre línies.
.--max-lines-5	Limitar a cinc línies.
.--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	Activa el truncament i la limitació per línies a l'element objectiu.
.--truncate-character	(per defecte) Truncar a nivell de caràcter.
.--truncate-word	Truncar a nivell de paraula.

Propietats personalitzades

Propietat	Tipus	Predeterminat	Descripció
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Tokens consumits

Token	Tipus	Valor
--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%

Suport del navegador

• La limitació es basa en -webkit-line-clamp amb display: -webkit-box, en parella amb l'estàndard line-clamp.

Relacionat

• text — Tipografia del cos que això trunca.