Estouro de texto: reticências consideradas prejudiciais

Republicado por Platão

seguidores: 0

Existem alguns casos de uso legítimos para esta técnica. Por exemplo, você pode ter uma tabela com títulos e descrições. Para preservar mais espaço para o título, você restringe a descrição a uma linha em pequenas viewports para uma linha e repete a descrição na página de detalhes para este item.

No entanto, muitas vezes eu o vejo usado em itens como botões ou até rótulos de formulários para torná-los mais bonitos (?) ou ao alinhá-los verticalmente. Mas uma vez que você altera a janela de visualização ou redimensiona o texto, o final do texto desaparece.

Eu acho que “… se usado em certas situações” pertence lá, mas certamente contribui para um título de postagem melhor sem ele. Como diz Eric, existem casos de uso legítimos para truncar texto. Talvez apenas alguns, mas legítimos, no entanto.

O objetivo final é evitar a “perda” de dados, algo isso certamente pode acontecer em CSS. O texto que inadvertidamente transborda de um contêiner é perdido no sentido de que simplesmente não está lá. E se esse texto simplesmente não estiver lá, os usuários sentirão falta dele, mesmo que seja o melhor e mais bem elaborado apelo à ação já publicado na web.

Eric ressalta que não há como tornar o texto truncado por text-overflow: ellipsis visível. Uma vez que se foi, se foi (embora os leitores de tela pareçam anunciá-lo). São dados praticamente perdidos. Você pode estar bem com isso. Isso é legal, desde que você saiba o que está acontecendo e se destina.

Mas aqui está o que Eric diz que me fez querer compartilhar isso:

Não restrinja o conteúdo para se adequar ao seu design, torne seu CSS flexível para lidar com palavras mais longas com elegância.

Você de novo poder deseja adequar o conteúdo ao design. Mas eu provavelmente argumentaria, como Eric, que o design deve se adaptar ao conteúdo ao invés do contrário. Tenho dificuldade em lembrar de qualquer situação em que o texto em uma página não seja importante ou sem propósito, na medida em que seria legal cortá-lo em qualquer ponto arbitrário determinado por uma propriedade CSS. Talvez um arquivo de postagens de blog onde cada postagem mostre um trecho do conteúdo da postagem antes de truncar, mas isso não é exatamente um caso de uso para text-overflow: ellipse.

CSS tem as ferramentas para fazer um design flexível que leva em conta comprimentos variados de texto. Então, talvez errar do lado de escrevendo CSS defensivo… CSS que antecipa problemas e sabe como lidar com diferentes cenários de conteúdo. text-overflow: ellipsis pode fazer parte do seu arsenal CSS para isso. Mas também pode estar jogando o bebê fora com a água do banho. Vale a pena perguntar se a perda desses dados vale o custo do que esse conteúdo deveria fazer antes de dar um corte de cabelo.

Já que estamos falando sobre truncar o texto…

Ligação em Out 1, 2021