CSS: truncate

.--truncate — Troncamento con ellissi usando il clamp di righe controllato da --lines — utilizzabile da solo o concatenato a qualsiasi componente (.instui-button.--truncate).

La classe base usa display: -webkit-box e legge la proprietà personalizzata --lines per limitare il testo a un numero fisso di righe prima che termini con un'ellissi.

Source: index.ts

TIP

Requisito JS — Questo componente non include CSS proprio — markup e comportamento provengono interamente da @pantoken/interactions. Il suo modificatore --max-lines-auto è gestito da quel comportamento. Vedi la tabella dei modificatori qui sotto.

Uso

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

Esempi

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

Modificatori

Modificatore	Descrizione
.--lines-1	Alias di --max-lines-1.
.--lines-2	Alias di --max-lines-2.
.--lines-3	Alias di --max-lines-3.
.--lines-4	Alias di --max-lines-4.
.--lines-5	Alias di --max-lines-5.
.--max-lines-1	Limitare a una riga (predefinito).
.--max-lines-2	Limitare a due righe.
.--max-lines-3	Limitare a tre righe.
.--max-lines-4	Limitare a quattro righe.
.--max-lines-5	Limitare a cinque righe.
.--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	Abilita il troncamento e il clamp di righe sull'elemento target.
.--truncate-character	(predefinito) Tronca a livello di carattere.
.--truncate-word	Tronca a livello di parola.

Proprietà personalizzate

Proprietà	Tipo	Predefinito	Descrizione
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Token consumati

Token	Tipo	Valore
--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%

Supporto browser

• Il clamp si basa su -webkit-line-clamp con display: -webkit-box, abbinato al consueto line-clamp.

Correlati

• text — Tipografia del corpo a cui questo si applica.