Обрезать строку не по количеству символов, а по высоте блока бывает выгоднее, если вы, например, делаете список новостей или товаров в виде одинаковых квадратных блоков. Тогда, при таком подходе, они не будут "плясать" по высоте и будут выглядеть красиво и одинаково.
Для работы нам понадобится подключенных к проекту 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. Если есть вопросы или предложения по доработке, задавайте их ниже в комментариях.
Рабочий код "Обрезка строки по высоте блока с помощью Jquery и подставлением многоточия"
Смотреть Pen Glass by VectorDev (@VectorDEV) на CodePen.