css: la pinza de línea multilínea (puntos suspensivos) no funciona

imagen del problema

Apliqué esta clase a la etiqueta 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 viste en la imagen, hay líneas completas de texto y los puntos suspensivos no se muestran.

Pero cuando cambio el tamaño de la pantalla, los puntos suspensivos funcionan bien.

El problema ocurrió solo la primera vez que se renderizó la página.

Cualquier adivce?

Respuestas a la pregunta(2)

Su respuesta a la pregunta