Interação

Texto truncado

Ellipsis / Line clamp

Encurta visualmente um texto que não cabe no espaço disponível.

Este é um título muito longo que não cabe neste pequeno cartão

text-overflow: ellipsis

Exemplo didático · Representação visual do padrão

Quando usar

Conter títulos em áreas compactas quando existe acesso ao texto completo.

Cuidados e acessibilidade

Não esconda informações indispensáveis e ofereça uma forma de ver o conteúdo completo.

Partes e comportamento

Área limitada, texto encurtado e acesso ao conteúdo completo.

Não confunda

Ellipsis visual não remove necessariamente o texto do documento.

Exemplo de código

.titulo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Texto truncado (Ellipsis / Line clamp) em português do Brasil. Encurta visualmente um texto que não cabe no espaço disponível. Contexto de uso: Conter títulos em áreas compactas quando existe acesso ao texto completo. Estrutura: Área limitada, texto encurtado e acesso ao conteúdo completo. Referência técnica: text-overflow: ellipsis. Requisito: Não esconda informações indispensáveis e ofereça uma forma de ver o conteúdo completo. Considere também: Ellipsis visual não remove necessariamente o texto do documento. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗