css - Mehrzeilige Linienklemme (Auslassungspunkte) funktioniert nicht

problem image

Ich habe diese Klasse auf das h3-Tag angewendet.

.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;
}

Wie Sie im Bild gesehen haben, gibt es vollständige Textzeilen, und die Auslassungspunkte wurden nicht angezeigt.

Aber wenn ich die Größe des Bildschirms verändere, funktionieren die Auslassungspunkte einwandfrei.

Problem trat nur beim ersten Rendern der Seite auf.

Adivce?

Antworten auf die Frage(4)

Ihre Antwort auf die Frage