Como Adicionar Reticências Com Múltiplas Linhas CSS

Você está desenvolvendo uma aplicação web onde em determinado local, você precisa mostrar a descrição de um produto.
Essa descrição pode ser um texto enorme, mais de 10 linhas ou pode ser um texto pequeno, contendo apenas duas linhas.
Então, o UX designer determina que a descrição deve conter apenas 3 linhas, caso ultrapasse isso, deve-se acrescentar reticências (…)

Como podemos adicionar reticências em múltiplas linhas, com CSS?
Vamos usar uma propriedade chamada -webkit-line-clamp! Bora ver como funciona?

A propriedade -webkit-line-clamp permite limitar um container com um número específico de linhas.

Essa propriedade funciona através da combinação entre a propriedade display, que deve ser definida como -webkit-box ou -webkit-inline-box
e a propriedade -webkit-box-orient deve ser definida como vertical

Então, vamos dizer que temos o seguinte conteúdo:

<p>
  Este trecho de código tem como funcionalidade demonstrar a propriedade
  webkit-line-clamp em ação, no blog back & front!
</p>

Agora, adicionamos o CSS:

p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Definimos quantas linhas queremos */
  display: -webkit-box;
  overflow: hidden;
  width: 300px; /* Definimos o tamanho máximo do nosso container*/
}

E obtemos o seguinte resultado: