CSS: truncate

.--truncate — Truncamento com reticências e limitação de linhas controlada por --lines — utilizável isoladamente ou encadeado a qualquer componente (.instui-button.--truncate).

A classe base usa display: -webkit-box e lê a propriedade customizada --lines para limitar o texto a um número fixo de linhas antes de terminar em reticências.

Source: index.ts

TIP

Requisito JS — Este componente não fornece CSS próprio — sua marcação e comportamento vêm inteiramente de @pantoken/interactions. Seu modificador --max-lines-auto é dirigido por esse comportamento. Ver a tabela de modificadores abaixo.

Uso

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

Exemplos

<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	Descrição
.--lines-1	Sinônimo de --max-lines-1.
.--lines-2	Sinônimo de --max-lines-2.
.--lines-3	Sinônimo de --max-lines-3.
.--lines-4	Sinônimo de --max-lines-4.
.--lines-5	Sinônimo de --max-lines-5.
.--max-lines-1	Limitar a uma linha (padrão).
.--max-lines-2	Limitar a duas linhas.
.--max-lines-3	Limitar a três linhas.
.--max-lines-4	Limitar a quatro linhas.
.--max-lines-5	Limitar a cinco linhas.
.--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	Ativa truncamento e limitação de linhas no elemento-alvo.
.--truncate-character	(padrão) Truncar ao nível de caractere.
.--truncate-word	Truncar ao nível de palavra.

Propriedades personalizadas

Propriedade	Tipo	Padrão	Descrição
--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%

Compatibilidade com navegadores

• A limitação de linhas depende de -webkit-line-clamp com display: -webkit-box, emparelhado com o padrão line-clamp.

Relacionados

• texto — Tipografia do corpo que isto trunca.