O artigo de hoje surge em parte no seguimento do artigo sobre o CSS: clamp(), porque inicialmente fiz confusão entre ambos.
Foi precisamente ao tentar mostrar o que o line-clamp faz que me apercebi de que, apesar de ambas as propriedades terem nomes semelhantes, servem propósitos completamente diferentes.
Provavelmente por causa do nome semelhante, não sou o único a confundir o clamp() com o line-clamp.
A verdade é que ambos aparecem frequentemente em artigos sobre design responsivo e interfaces modernas, o que torna a confusão ainda mais comum.
Mas, na realidade, fazem coisas bastante diferentes.
O clamp(), como mostrei no artigo que lhe dediquei, serve para limitar valores fluidos entre um mínimo e um máximo:
font-size: clamp(16px, 2vw, 32px);
Neste exemplo, o tamanho do texto adapta-se ao ecrã através de 2vw, mas nunca ficará menor do que 16px nem maior do que 32px.
Já o line-clamp é usado para limitar a quantidade de linhas de texto visíveis:
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
Ou seja, em vez de controlar o tamanho do texto, o line-clamp controla quanto espaço o texto pode ocupar dentro do elemento.
E embora possa parecer um pequeno detalhe, isso torna-se extremamente útil em:
- cartões
- grelhas responsivas
- pré-visualizações de artigos
- listas de produtos
- caixas de texto
- layouts modernos
- interfaces adaptadas ao telemóvel
- conteúdo criado pelo utilizador
- ...etc...
Basicamente, sempre que existe texto variável e queremos evitar que um elemento fique maior do que os restantes.
Mas o melhor de tudo?
O clamp() e o line-clamp funcionam muito bem juntos.
Tão bem que hoje em dia é bastante comum combinar ambos no mesmo elemento:
.card-title {
font-size: clamp(1rem, 2vw, 2rem);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} Como este exemplo demonstra, o clamp() torna o tamanho do texto responsivo, enquanto o line-clamp impede que o título ocupe linhas em excesso.
Ou seja, um controla o tamanho do texto e o outro controla o espaço que ele ocupa.
Na prática, isto ajuda bastante a manter cartões alinhados, especialmente em grelhas responsivas onde títulos maiores poderiam destruir o equilíbrio visual do layout.
A sintaxe do line-clamp é a seguinte:
-webkit-line-clamp: none | integer | initial | inherit
No entanto, se repararem bem nos exemplos acima, está incluído o prefixo do fornecedor: -webkit-line-clamp.
Isso acontece porque a implementação mais utilizada continua dependente das antigas propriedades do WebKit, funcionando apenas em conjunto com:
display: -webkit-box; -webkit-box-orient: vertical;
Apesar destas propriedades com prefixo serem consideradas obsoletas, esta combinação faz actualmente parte da especificação e continua amplamente suportada pelos navegadores modernos.
Aliás, é um daqueles casos curiosos da Web moderna onde uma solução antiga acabou por se tornar o comportamento padrão na prática.
Na maioria dos casos, também irá querer definir overflow como hidden; caso contrário, o conteúdo poderá continuar visível apesar do truncamento.
Dependendo do navegador e do conteúdo, o corte do texto pode acontecer a meio de uma palavra e não necessariamente no final da frase.
Mas podem perguntar: então o text-overflow não faz já isso?
Bem... faz, mas apenas para texto numa única linha.
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
O clássico trio acima funciona muito bem para menus, botões ou títulos pequenos, mas deixa de ser suficiente quando queremos limitar múltiplas linhas de texto.
Com o line-clamp, em conjunto com -webkit-box-orient: vertical; e -webkit-line-clamp: 2;, podemos escolher exactamente em que linha o texto será cortado.
Se alguma vez tiveste de limitar o número de linhas de um elemento sem recorrer ao JavaScript, a propriedade CSS line-clamp é provavelmente o que procuras.
Mas vamos a um exemplo prático, onde podes ver o line-clamp em acção e podes até escolher onde o texto vai ser truncado:
Se o corte acontecer imediatamente após um sinal de pontuação, as reticências [...] adicionadas pelo navegador continuam a aparecer, originando casos como ...., !... ou ?....
É uma solução simples, prática e extremamente útil para controlar conteúdo criado pelo utilizador, manter cartões alinhados, evitar que o texto destrua o layout ou simplesmente tornar interfaces mais limpas e consistentes.
E embora seja uma propriedade relativamente simples, é também um daqueles pequenos detalhes que ajudam um site a parecer mais moderno, organizado e profissional.
Porque no design responsivo, por vezes não é apenas o tamanho do texto que importa...
mas também o espaço que ele ocupa.
Compatibilidade actual
Felizmente, o suporte é bastante bom em navegadores como:
Como podem ver, o suporte do line-clamp nos navegadores modernos já é bastante sólido.
No entanto, alguns valores como none ainda podem apresentar comportamentos inconsistentes em certos browsers devido à antiga implementação baseada em -webkit-line-clamp.
Ligações úteis
- MDN — line-clamp
- Can I Use — line-clamp
- Overflow: o que é e tudo sobre como funciona
- CSS webkit-line-clamp Property
- How to use CSS line-clamp to trim lines of text
E por hoje é tudo. 8)
Até Breve. :-F
Comentários
Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.
Mas antes de comentarem, leiam as minhas Regras dos Comentários.
Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.
Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.
Enviar um comentário