Обрезка строки по высоте блока с помощью Jquery и подставлением многоточия

Обрезать строку не по количеству символов, а по высоте блока бывает выгоднее, если вы, например, делаете список новостей или товаров в виде одинаковых квадратных блоков. Тогда, при таком подходе, они не будут "плясать" по высоте и будут выглядеть красиво и одинаково.

Для работы нам понадобится подключенных к проекту Jquery любой версии. 

Для начала сам HTML блок с длинным текстом, внутри блока весь текст должен размещаться внутри тега <span></span>.

<div class="truncate-text">
<span>
Тест строки, которую нужно обрезать
</span>
</div>

Теперь немного CSS. Нам надо задать высоту блока родителя и с помощью свойства overflow подстраховаться на случай, если код JS не сработает.

.truncate-text{
  height: 75px; // высота блока названия
  overflow: hidden; //если текст выходит за пределы высоты блока, то скрываем его
  font-size: 17px; //размер шрифта
  line-height: 1.3; //высота строки
  font-weight: 500; //жирность шрифта
  color: #000; // цвет текста
}
 

Ну и теперь нам надо написать наш JS код.

//обрезка строки через класс (если на странице только 1 блок, то лучше через ID)
$(".truncate-text").each(function() {
 let text = $(this).find("span"); //находим блок span внутри блока родителя
 while (text.height() > $(this).height()) {
// пока текст не поместится в блок обрезаем его и подставляем многоточие в конце
 text.text(text.text().split(" ").slice(0, text.text().split(" ").length - 1).join(" ") + "...");
 }
 }); 

Ниже в CodePen представлена рабочая версия кода, там высоту строки определила в 35px. Если есть вопросы или предложения по доработке, задавайте их ниже в комментариях.