Aprenda como limitar texto em x linhas e adicionar “…” no final

Ao lidar com grandes blocos de texto no front-end, muitas vezes é necessário limitar seu tamanho para garantir uma experiência de usuário mais amigável. Uma maneira eficiente e fácil de fazer isso é por meio de CSS, utilizando propriedades específicas para definir o número de linhas permitidas e até adicionando uma funcionalidade “Leia Mais” ao conteúdo.

.text-element {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3; // Aqui adiciona a quantidade de linhas limite
  -webkit-box-orient: vertical;
}