css - braçadeira de linha de linha múltipla (reticências) não funciona

imagem do problema

Eu apliquei essa classe na tag h3.

.ellipsis-2 {
  $lines: 2;
  $line-multiple: 1.3;
  $font-size: 1em;
  display: block;
  display: -webkit-box;
  max-height: $font-size * $line-multiple * $lines;
  line-height: $font-size * $line-multiple;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

Como você viu na imagem, há linhas completas de texto e reticências não exibidas.

Mas quando redimensiono a tela, as reticências funcionam bem.

O problema ocorreu apenas na primeira renderização da página.

Algum aviso?