Limitando texto com com 3 pontinhos

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. :)

Comments

[Pedro Moraes]

Muito bom Sara!!! Tá ótimo o artigo, facílimo de compreender, eu curti!

[Sara Gomes]

Muito obrigada, Pedrinhoo. Que bom que curtiu!!

[Jorge Souza]

Obrigado por compartilhar, Sara! :D

[Sara Gomes]

Que bom que gostou, Jorge!! :D