mail@vecdev.ru

Обрезка строки по высоте блока с помощью 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. Если есть вопросы или предложения по доработке, задавайте их ниже в комментариях.

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

Смотреть Pen Glass by VectorDev (@VectorDEV) на CodePen.

Наши соцсети

Подписывайтесь на наши соцсети, там еще больше информации и контента. На YouTube канале вы найдете видео уроки по созданию сайтов на Битрикс и другие полезные "фишки".

Поделиться статьей
Частный разработчик сайтов Vector Dev
Комментарии
Загрузить файл или картинкуПеретащить с помощью Drag'n'drop
Перетащите файлы
Ничего не найдено
Защита от автоматических сообщений