Como limitar a quantidade de linhas usando CSS

Neste post vamos ensinar como limitar quantidade de linhas usando CSS, sem nenhum uso de Java script para essa função, é uma função bem simples, conhecida por front-ends avançados.

Em algumas situações essa função do CSS ajuda muito, em outras quando queremos esconder todos os dados que existe naquela linha, requer o uso de Java Script, pois a função usada apenas com CSS esconde apenas no visual, no código ela ainda permanece visível para qualquer usuário que saiba inspecionar o código e procurar aquela linha.

Segue o vídeo de demonstração:

Texto original

Aqui adicionamos um código HTML com um paragrafo e um texto para demonstrar o comportamento do código CSS

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis blandit ligula, in pellentesque arcu lacinia a. Suspendisse eu tellus nec arcu blandit vulputate vitae non lacus.</p>

Aqui é o código completo do CSS que irá bloquear a quantidade de linhas do texto.

p {
     overflow: hidden; /* remove o estouro do elemento */
     text-overflow: ellipsis; /* adiciona “...” no final */
     display: -webkit-box;
     -webkit-line-clamp: 2; /* quantidade de linhas */
     -webkit-box-orient: vertical; /* conteúdo será apresentado verticalmente */
}

Resultado final do código que indicamos acima:

See the Pen Limitando Linhas com CSS by Cupcom Codes (@cupcomcodes) on CodePen.