CSS: truncate

.--truncate — Truncamiento por puntos suspensivos con ajuste de líneas controlado por --lines — usable solo o encadenado a cualquier componente (.instui-button.--truncate).

La clase base usa display: -webkit-box y lee la propiedad personalizada --lines para limitar el texto a un número fijo de líneas antes de que termine en puntos suspensivos.

Source: index.ts

TIP

Requisito de JS — Este componente no incluye CSS propio: su marcado y comportamiento provienen íntegramente de @pantoken/interactions. Su modificador --max-lines-auto está impulsado por ese comportamiento. Ver la tabla de modificadores más abajo.

Uso

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

Ejemplos

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

Modificadores

Modificador	Descripción
.--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	Limitar a una línea (predeterminado).
.--max-lines-2	Limitar a dos líneas.
.--max-lines-3	Limitar a tres líneas.
.--max-lines-4	Limitar a cuatro líneas.
.--max-lines-5	Limitar a cinco líneas.
.--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	Habilita el truncamiento y el ajuste de líneas en el elemento objetivo.
.--truncate-character	(predeterminado) Truncar a nivel de carácter.
.--truncate-word	Truncar a nivel de palabra.

Propiedades personalizadas

Propiedad	Tipo	Predeterminado	Descripción
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Tokens consumidos

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

Compatibilidad con navegadores

• El ajuste de líneas depende de -webkit-line-clamp con display: -webkit-box, emparejado con el estándar line-clamp.

Relacionado

• text — Tipografía del cuerpo que esto trunca.