Обрезаем текст по количеству слов или по размерам блока с помощью jQuery
На одном из проектов необходимо было сделать блок с превью новостей, то есть блоки в слайдере с картинкой и анонсом. По умолчанию, на сайтах данные анонсы обрезают по количеству символов, что не совсем красиво, а задача состоит в том, чтобы контент обрезался не по количеству символов, а вплотную к краям блока.
Данный код режет текст по количеству символов, что не совсем красиво:
// Cut long Title in the SLider $(function() { function cutLongText(textSize, finalLength) { $('.news').each(function() { if ($(this).text().length > textSize) { $(this).html($(this).text().slice(0, finalLength) + '...'); } }) } cutLongText(50, 50); });
Данный код режет текст по словам в зависимости от размеров блока, впритык к родительскому блоку анонса:
// Crop title in the News $(function() { (function cropTitle() { $(".news").each(function() { var $title = $(this).find("p"); while ($title.height() > $(this).height()) { $title.text($title.text().split(" ").slice(0, $title.text().split(" ").length - 1).join(" ") + "..."); } }); })(); });
В примере используются классы и стили просто для наглядности. При изменении ширины экрана, нажмите «Rerun» или обновите, чтобы скрипт высчитал новые размеры родительского блока и тестового блока.
See the Pen Crop title By JS by Denis (@deniscreative) on CodePen.0
Делаем кликабельным <object> с помощью CSS (проблема была замечена только в Chrome) Вешаем ссылку на…
Модель Flexbox Layout (Flexible Box) направлена на предоставление более эффективного способа выстраивания, выравнивания и распределения…
Условные комментарии более не поддерживаются Поддержка условных комментариев в стандартном режиме и режиме совместимости Internet…
Есть много разных способов анимировать SVG-изображения. Сейчас я рассмотрю и сделаю себе пометки, как сделать…