CSS: truncate

.--truncate — troncature par points de suspension avec limitation de lignes contrôlée par --lines — utilisable seul ou enchaîné sur n'importe quel composant (.instui-button.--truncate).

La classe de base utilise display: -webkit-box et lit la propriété personnalisée --lines pour limiter le texte à un nombre fixe de lignes avant qu'il ne se termine par des points de suspension.

Source: index.ts

TIP

Exigence JS — Ce composant n'expédie aucun CSS propre — son balisage et son comportement proviennent entièrement de @pantoken/interactions. Son modificateur --max-lines-auto est piloté par ce comportement. Voir la table des modificateurs ci‑dessous.

Utilisation

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

Modificateurs

Modificateur	Description
.--lines-1	Alias de --max-lines-1.
.--lines-2	Alias de --max-lines-2.
.--lines-3	Alias de --max-lines-3.
.--lines-4	Alias de --max-lines-4.
.--lines-5	Alias de --max-lines-5.
.--max-lines-1	Limiter à une ligne (par défaut).
.--max-lines-2	Limiter à deux lignes.
.--max-lines-3	Limiter à trois lignes.
.--max-lines-4	Limiter à quatre lignes.
.--max-lines-5	Limiter à cinq lignes.
.--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	Active la troncature et la limitation de lignes sur l'élément ciblé.
.--truncate-character	(par défaut) Tronquer au niveau des caractères.
.--truncate-word	Tronquer au niveau des mots.

Propriétés personnalisées

Propriété	Type	Par défaut	Description
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Tokens consommés

Token	Type	Valeur
--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%

Compatibilité des navigateurs

• Le clamping s'appuie sur -webkit-line-clamp avec display: -webkit-box, jumelé au standard line-clamp.

Connexe

• text — Body typography that this truncates.