WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLjQueryTecnologiasWordPress
Silva Web Designs - Blog

Limitar quantidade de texto a X linhas utilizando CSS

É possível limitar a quantidade de texto para uma quantidade “X” de linhas utilizando CSS? A resposta é sim.

Existe uma forma, mas é apenas utilizando o webkit. Contudo, quando se combina com line-height: X e max-height: X*N, vai funcionar noutros browsers, apenas sem as reticências.

Vejamos o seguinte HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.

Se quisermos limitar este texto para mostrar apenas as duas primeiras linhas de texto podemos fazê-lo utilizando o seguinte CSS:


.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 32px;      /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

Assim, o texto irá mostrar apenas duas linhas do total.

Em que situações isto é útil? Recentemente utilizei este código numa página com três colunas exibindo posts de notícias e as alturas dos blocos de texto eram diferentes devido à extensão do título.

Qualquer dúvida, como sempre, basta deixar um comentário.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

2 thoughts on “Limitar quantidade de texto a X linhas utilizando CSS

  1. Seu post foi bem didático, procurava uma solução rápida e com uma boa explicação, solucionou o problema que estava enfrentando em meu trabalho, agradeço por compartilhar seu conhecimento 🙂

Join the discussion