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
 
jorgedss profile image
Jorge Souza

Obrigado por compartilhar, Sara! :D

Collapse
 
saragomesdev profile image
Sara Gomes

Que bom que gostou, Jorge!! :D

Collapse
 
pedronm profile image
Pedro Moraes • Edited

Muito bom Sara!!! TĂĄ Ăłtimo o artigo, facĂ­limo de compreender, eu curti!

Collapse
 
saragomesdev profile image
Sara Gomes

Muito obrigada, Pedrinhoo. Que bom que curtiu!!