Ellipsize no desenvolvimento móvel — o que é e formas de truncar texto

O que é Ellipsize?

Ellipsize (de ellipsis — reticências) é uma técnica para exibir texto que excede o tamanho do contêiner. Em vez de simplesmente cortar a linha no limite, o ellipsize adiciona um caractere de reticências (três pontos, Unicode U+2026), indicando ao utilizador que há conteúdo oculto.

O termo está estabelecido no Android SDK, onde a propriedade android:ellipsize define o comportamento do TextView em caso de transbordo. No iOS, a funcionalidade análoga chama-se truncamento e é gerida através do NSLineBreakMode. Na web, utiliza-se a propriedade CSS text-overflow com o valor ellipsis.

O principal objetivo do ellipsize é informar o utilizador de que o texto foi encurtado. Ao contrário do corte baseado em píxeis, onde uma palavra pode ser partida ao meio, o ellipsize garante a legibilidade: as reticências são colocadas após uma palavra ou caractere completo sem o partir. Isto está alinhado com os princípios do Material Design e das Human Interface Guidelines.

Use ellipsize sempre que a largura do contêiner for fixa e o comprimento do texto for dinâmico: cabeçalhos de artigos, células de tabela, botões com etiquetas, contactos numa lista, migalhas e caminhos de ficheiros.

Ellipsize no Android: TextView e modos

No Android, o ellipsize é configurado através do atributo android:ellipsize no XML ou do método setEllipsize() no código. Existem quatro modos disponíveis, cada um determina qual lado do texto será truncado.

O modo END (padrão na maioria dos casos) trunca o final da linha e coloca as reticências no lado direito do contêiner. O modo START trunca o início — reticências à esquerda, texto visível à direita. MIDDLE trunca o meio, mantendo o início e o fim da linha visíveis. O modo MARQUEE é uma deslocação animada do texto, onde as reticências não são mostradas e o texto desloca-se ciclicamente.

<!-- XML layout -->
<TextView
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Very long text that will be truncated"
    android:ellipsize="end"
    android:maxLines="1"
    android:singleLine="true" />

<!-- Kotlin code -->
textView.setEllipsize(TextUtils.TruncateAt.MIDDLE)

Importante: ellipsize só funciona em combinação com maxLines ou singleLine. Se o número de linhas não for limitado, a TextView crescerá em altura e o ellipsize não será ativado. Desde o Android 8.0 (API 26), o ellipsize suporta modo multilinha com maxLines > 1 — as reticências são colocadas no final da última linha.

Para uso programático, chame TextUtils.TruncateAt com um dos valores: END, START, MIDDLE, MARQUEE. O valor NONE desativa o ellipsize.

Na prática, o END é adequado para 90% dos casos — os utilizadores esperam que o texto seja truncado no final. O MIDDLE é usado para caminhos de ficheiros (por exemplo, "/User/.../project/main.kt") para que o final do caminho fique visível. O START é usado para nomes com um prefixo comum (por exemplo, "...@gmail.com").

Truncamento de texto no iOS: NSLineBreakMode

No iOS, o equivalente ao ellipsize é a propriedade lineBreakMode da classe UILabel (e NSTextContainer para UITextView). Três modos de truncamento estão disponíveis: .byTruncatingTail (fim), .byTruncatingMiddle (meio) e .byTruncatingHead (início).

O modo .byTruncatingTail corresponde a android:ellipsize="end". .byTruncatingHead corresponde a START, .byTruncatingMiddle a MIDDLE. O modo .byClipping trunca o texto sem reticências, que raramente é usado em interfaces modernas. O modo .byCharWrapping ajusta por caracteres sem truncamento.

let label = UILabel()
label.text = "Texto longo que não cabe nos limites da etiqueta"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString também suporta lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

No iOS, o truncamento funciona juntamente com numberOfLines. Se numberOfLines = 1, o texto é truncado numa única linha. Se numberOfLines = 2 — na segunda linha. O UITextView usa NSTextContainer.lineBreakMode, que também suporta os três modos de truncamento.

Particularidade do iOS: o modo .byTruncatingMiddle no UILabel pode comportar-se de forma inesperada em strings curtas — se a string couber inteiramente, as reticências não aparecem. Para garantir a exibição das reticências em strings curtas, use lógica personalizada através de sizeThatFits.

CSS text-overflow: como adicionar reticências na web

No desenvolvimento web, o ellipsize é implementado através da propriedade CSS text-overflow: ellipsis em combinação com overflow: hidden e white-space: nowrap. Esta é a forma padrão de truncar uma linha com reticências em interfaces web.

.text-cell {
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

A propriedade text-overflow não funciona sem overflow: hidden — o navegador precisa de saber que o conteúdo está a ser cortado. white-space: nowrap evita a quebra de linha, caso contrário o texto passaria para a linha seguinte e não ocorreria transbordo.

Para truncamento multilinha (por exemplo, 2 linhas com reticências no final da segunda), anteriormente era usada a propriedade experimental -webkit-line-clamp, que agora está padronizada como line-clamp no CSS Overflow Level 4.

Na prática, o text-overflow: ellipsis é suportado por todos os navegadores modernos há mais de 10 anos e é a forma mais fiável de truncar texto na web.

Como escolher o modo de truncamento correto

A escolha do modo de ellipsize afeta a UX e pode melhorar a perceção da interface ou confundir o utilizador. A regra principal: o utilizador espera que a parte truncada esteja onde é menos necessária para a compreensão.

O modo END é adequado para cabeçalhos, legendas, títulos — o utilizador vê o início da linha e entende o contexto. Umas reticências à direita significam "há mais, mas não coube". Este é o modo mais intuitivo e comum.

O modo MIDDLE é indispensável para caminhos de ficheiros, endereços de email e identificadores longos. Quando o final da linha contém informação única (nome de ficheiro, domínio), o utilizador deve ver isso especificamente, enquanto o início pode ser encurtado. Exemplo: "/User/.../important_document.pdf" — o nome do ficheiro fica imediatamente visível.

O modo START raramente é usado, mas é útil para listas de contactos com um prefixo comum — por exemplo, "...@gmail.com" em vez de "username@gmail.com" quando todos os endereços pertencem ao mesmo domínio. No entanto, este padrão muitas vezes confunde mais do que ajuda. De acordo com o Nielsen Norman Group, os utilizadores leem da esquerda para a direita e esperam informações importantes no início, pelo que o truncamento START aumenta a carga cognitiva.

O modo MARQUEE (texto deslocável) só é apropriado para elementos de uma única linha com baixa frequência de atualização: a faixa atual num leitor, um ticker de notícias, uma barra de estado. Não use marquee para tabelas, listas ou formulários — a animação distrai e reduz o desempenho em dispositivos fracos.

Problemas comuns e suas soluções

O primeiro problema — ellipsize não funciona. A causa mais frequente é a ausência de um limite de linhas. Sem maxLines, a TextView cresce em altura e não ocorre transbordo de largura. Solução: especifique sempre maxLines (ou singleLine="true" para uma única linha).

O segundo problema — as reticências não são mostradas ao alterar o texto programaticamente. Após chamar setText(), a TextView pode não redesenhar corretamente. Solução: chame invalidate() ou post(() -> requestLayout()) depois de alterar o texto.

O terceiro problema — comportamento diferente em diferentes versões do Android. Antes da API 23, o ellipsize em modo multilinha (maxLines > 1) não era suportado. Solução: para compatibilidade, verifique Build.VERSION.SDK_INT e use ViewCompat.setEllipsize() do AndroidX.

O quarto problema — o caractere de reticências não é exibido em fontes personalizadas. Se a fonte não contiver o glifo U+2026, as reticências são substituídas por três pontos. Solução: verifique se a fonte tem o glifo de reticências ou adicione uma fonte de reserva através de fontFamily.