Como limitar a quantidade de texto com CSS

Neste post vamos ensinar como limitar a quantidade de textos usando CSS, sem nenhum uso de Javascript 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.

Vídeo de demonstração do código:

Código HTML do texto que vamos limitar:

<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>

Agora vamos escrever o código CSS responsável pela limitação do texto:

p {
     max-width: 300px; /* Limite maximo do texto*/
     white-space: nowrap; /* Removendo quebra de linha */
     overflow: hidden; /* Removendo a barra de rolagem */
     text-overflow: ellipsis; /* Adicionando "..." ao final do texto */
}

Resultado final: