проблемное изображение

Я применил этот класс к тегу 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;
}

Как вы видите на картинке, там есть полные строки текста и многоточие не показывается.

Но когда я изменяю размер экрана, многоточие работает нормально.

Проблема возникла только при первом отображении страницы.

Любая реклама?