TLDR;
A história
Hoje a responsável pela UX da empresa onde trabalho nos trouxe uma solicitação bem simples:
"quando um determinado texto for muito grande, exiba somente as duas primeiras linhas e, quando o usuário passar o mouse, mostre a dica de tela com o texto completo".
-- UX da Empresa
Num primeiro momento pensamos em limitar o número de caracteres e fazer com o bom velho substring:
Mas aí veio a pergunta "quantos caracteres perfazem duas linhas?" 🤔
Fica bastante difícil definir essa quantidade quando não estamos utilizando uma fonte monoespaçada... E mesmo assim, fica bastante complicado se trouxermos a responsividade para a equação...
Pensando nisso, resolvemos nos adaptar e utilizar o elegantíssimo line-clamp do CSS:
🔀 PR criado.
🚀 Solução enviada para staging.
🤞 Só falta aprovação de QA e...
"Seria interessante que a dica de tela fosse exibida somente se o texto tiver sido truncado".
-- QA da empresa
E volta o cão arrependido para pensar mais um pouco sobre o assunto 😢.
Revisitando a solução baseada em quantidade de caracteres, poderíamos resolver assim:
Mas eu sou teimoso.
O line-clamp é mais elegante. Reflete melhor a problemática de exibir por quantidade de linhas.
Depois de pesquisar um pouco, encontrei uma forma de avaliar se o texto foi truncado baseado no tamanho do container utilizando as propriedades scrollWidth e scrollHeight:
No final do dia, com a lógica na cabeça, criei dois componentes, um baseado na quantidade de caracteres (sim, as vezes queremos limitar um texto por caracteres e não por linhas) e outro baseado em linhas.
Agora, no nosso projeto sempre que precisamos disso basta utilizarmos:
<line-clamp text="texto" :lines="2" />
<truncate-text text="texto" :max-char="50" />
Exemplo:
⚠️ IMPORTANTE: Nenhum dos códigos acima foi compartilhado na intenção de ser copiado e colado, é apenas uma forma de exemplificar o recurso 😜
Espero que isso lhe seja útil. Estou sempre aberto à pitacos e sugestões 😀
PS: Confesso que adoraria uma solução que não dependesse de JS... juro que tentei...mas não encontrei... se souber, compartilha aí 🙏
Top comments (0)