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)
Obrigado por compartilhar, Sara! :D
Que bom que gostou, Jorge!! :D
Muito bom Sara!!! TĂĄ Ăłtimo o artigo, facĂlimo de compreender, eu curti!
Muito obrigada, Pedrinhoo. Que bom que curtiu!!