Olá, pessoal 👋🏻
Neste artigo vamos falar sobre a importância de usar as reticências (mais conhecido 3 pontinhos), no CSS e não de forma escrita manualmente no HTML.
Para exemplificar, vou usar um card responsivo com um textinho em Mussum Ipsum. Inicialmente o card terá largura máxima de 490px, porém, ele é responsivo e poderá ter seu tamanho reduzido para que se adapte a qualquer tipo de tela.
Note que conforme o card é reduzido, as palavras que não cabem mais em suas respectivas linhas são empurradas para a próxima linha, e por esse motivo que devemos adicionar as reticências dinamicamente pelo CSS.
Limitando linha única
Com o card já montado com título e descrição, vamos ver o exemplo de como usar as reticências limitando o texto em apenas uma linha.
Neste exemplo usei a classe "card-text" para estilizar o parágrafo do card.
.card-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Limitando Múltiplas linhas
Agora se o assunto for limitar em múltiplas linhas, você pode usar o código a seguir:
.card-text {
display: -webkit-box;
-webkit-line-clamp: 3;
overflow: hidden;
-webkit-box-orient: vertical;
}
Defini o número de linhas que eu quis limitar, que nesse caso foram 3, usando a propriedade "-webkit-line-clamp".
Você pode brincar com o código e testar limitando com as reticências, e escolhendo o número de linhas que desejar.
Essas foram as dicas, espero que tenham te ajudado. :)
Top comments (4)
Muito bom Sara!!! Tá ótimo o artigo, facílimo de compreender, eu curti!
Muito obrigada, Pedrinhoo. Que bom que curtiu!!
Obrigado por compartilhar, Sara! :D
Que bom que gostou, Jorge!! :D