자동 도구 설명(Vue)의 Reticências

TLDR;

🔗 Resultado final

역사

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 CSS 수행:



🔀 홍보 크리아도.

🚀 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 😢.

quantidade de caracteres, poderíamos resolver assim의 솔루션 기반을 다시 방문하십시오.



Mas eu sou teimoso.

오line-clamp 우아하게. 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 escrollHeight :



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, nosso projeto semper que precisamos disso basta utilizarmos:

<line-clamp text="texto" :lines="2" />
<truncate-text text="texto" :max-char="50" />

예:

⚠️ 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 semper aberto à pitacos e sugestões 😀

추신: Confesso que adoraria uma solução que não dependsesse de JS... juro que tentei...mas não encontrei... se souber, compartilha aí 🙏