Gerador de CSS line-clamp
Gere uma regra CSS que trunca o texto após um número definido de linhas, com reticências ou desbotamento.
Gerador de CSS line-clamp
Os títulos dos cartões, descrições de produtos e pré-visualizações de comentários precisam do mesmo truque eventualmente: mostrar algumas linhas de texto e cortar o resto de forma limpa em vez de deixar um parágrafo longo arruinar o layout. Este gerador escreve essa regra CSS para si, pronta para colar numa folha de estilos como uma classe ".line-clamp".
Escolha o modo de uma linha para truncagem de uma linha — a combinação clássica "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" usada para títulos e células de tabela — ou modo multi-linha, que usa "-webkit-line-clamp" para cortar após quantas linhas definir, respeitando a height-line que escolher. Ative a opção de desbotamento para suavizar a última linha no fundo com um gradiente em vez de reticências bruscas, o que se lê melhor sobre uma imagem ou um cartão colorido. A opção fallback adiciona um bloco "@supports" para que os navegadores sem suporte line-clamp ainda obtenham um corte sensível de max-height em vez de uma parede de texto sem limite, e a opção Tailwind acrescenta a classe de utilitário correspondente ("truncate" ou "line-clamp-N") como um comentário para não precisar procurá-la.
Digite ou cole uma frase no campo de pré-visualização e a ferramenta estima como o seu texto se dividiria no número escolhido de linhas, para que possa verificar o número de linhas antes de se comprometer com um design. A estimativa baseia-se numa comprimento médio de leitura de linha em vez de medir fontes e contentores reais — é um guia para escolher um número sensato de linhas, não um render preciso em pixels.
Tudo é executado localmente no seu navegador: o CSS é gerado conforme digita, nada é carregado em qualquer lugar, e pode copiar o resultado, descarregá-lo como ficheiro .txt, ou enviá-lo diretamente para a entrada de outra ferramenta para continuar a trabalhar.