DEV Community

Cover image for Limitando texto com com 3 pontinhos
Sara Gomes
Sara Gomes

Posted on • Edited on

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.

Card: Meu primeiro artigo

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; 
}
Enter fullscreen mode Exit fullscreen mode

Limitando linha única

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; 
}
Enter fullscreen mode Exit fullscreen mode

Limitando Multiplas linhas

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)

Collapse
 
pedronm profile image
Pedro Moraes • Edited

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

Collapse
 
sgomesdev profile image
Sara Gomes

Muito obrigada, Pedrinhoo. Que bom que curtiu!!

Collapse
 
jorgedss profile image
Jorge Souza

Obrigado por compartilhar, Sara! :D

Collapse
 
sgomesdev profile image
Sara Gomes

Que bom que gostou, Jorge!! :D