Трюки с ссылкой “читать далее”. Автоматическое обрезание длинного текста в спойлер на jQuery Auto Line-Height - автоматическое межстрочное расстояние

Плагины из этой подборки не для создания финтифлюшек и различных красивостей, например, анимации или тому подобного, а для обеспечения корректной работы веб-страницы . Они понадобятся в том случае, когда становится бессильным перед поставленной задачей. Например, ели нужно автоматизировать обрезку текста по количеству символов или по высоте блока , если нужно быстро и правильно настроить типографию в адаптивном сайте , а также при мудреном выравнивании текста и т.д.

Мы в своей работе очень часто используем или использовали раньше эти плагины. Итак. К вашему вниманию 10 лучших jQuery плагинов для работы с текстом , которые помогут быстро и эффективно реализовать нестандартную дизайнерскую идею.

TextTailor - обрезка текста в зависимости от высоты блока

TextTailor - это очень полезный плагин, который поможет обрезать текст (поставить cut или ссылку «подробнее») так, чтобы он максимально заполнил контейнер, в котором находится. То есть, он позволяет обрезать текст в зависимости от высоты родительского блока и убрать все, что не поместилось, под кат. Единственное условие для корректной работы скрипта - это наличие у блока заданной высоты в фиксированном или процентном значении.
TextTailor часто используется на страницах со списком статей в виде плитки, когда блоки с превью топиков расположены по несколько штук в ряд и при этом заголовки статей разного объема. Дополнительно это может усложниться, если ширина этих блоков меняется, например, в . В таких случаях, как правило, количество символов краткого описания (аннотации) грубо ограничено, и из-за того, что заголовки имеют разную высоту, в блоках получаются пустые области. TextTailor поможет обойти эту проблему и заполнит весть блок текстом .

P/S Возможно кому-то будет полезно. Когда-то мы публиковали плагин под названием flexMenu , который регулирует количество пунктов в зависимости от ширины родительского блока. Все, что не помещается, отправляется в выпадающий список. Он был с статье под названием "5 адаптивных меню для разных задач ".

Кроме всего этого, плагин выполняет и вторую, не менее важную функцию. С его помощью можно масштабировать многострочный текст в зависимости от размеров родительского блока или экрана . Все что требуется сделать - это настроить требуемые параметры, все остальное плагин сделает за вас. Он автоматически будет изменять кегель и размер шрифта относительно размера экрана пользователя для обеспечения максимально комфортного чтения.

Succinct - обрезка текста по количеству символов

Succinct - jQuery плагин, который позволяет поставить ссылку «Подробнее» или многоточие после заданного количества символов в тексте. Все что не поместилось - обрезается.
По сути, это стандартный подход в обрезке текста, только средствами jQuery, а не на PHP .

Readmore.js - скрытие текста под спойлер

Readmore.js позволяет скрыть часть текста под спойлер . Скрипт, после заданного количества символов в тексте ставит кнопку «Подробнее», при нажатии на которую появляется скрытая часть текста с эффектом «выезда» вниз, сдвигая остальной контент.

FitText - масштабирование текста по ширине экрана

FitText - jQery плагин, который динамически изменяет размер шрифта в зависимости от ширины экрана или родительского блока. Отлично подойдет для создания заголовков экранов в адаптивных сайтах. Теперь вам не потребуется менять размер шрифта под каждое разрешение экрана.

Auto Line-Height - автоматическое межстрочное расстояние

Auto Line-Height позволяет автоматически рассчитать lineheight (высоту строк) при изменении размера окна. Как правило, применяется в адаптивных сайтах для улучшения читабельности текста на мобильных устройствах.

Bacon - выравнивание текста по кривой

Bacon - это jQuery плагин, который поможет выровнять текст на странице по заданной окружности или кривой .
Данное решение применяется в работе нечасто, но при мудреной дизайнерской задумке без него не обойтись.

jQSlickWrap - выравнивание текста по изображению

jQSlickWrap позволяет выровнять текст, как вам будет угодно. Часто применяется для выравнивания текста по какому-то предмету, который изображен на картинке . То есть, не по заданным размерам самого , а именно по тому, что изображено на фотографии. На скрине хорошо показан принцип его работы.

Плагин позволяющий скрывать часть текста, если он превышает заданную длину. Добавляется ссылка, как правило в виде кнопки "Подробнее" - по клику отображается скрытый текст.

Совместим с версиями jQuery выше 1.7.0

JS

Простой вызов плагина:

$("article").readmore();

Можно вызвать с дополнительными опциями:

$("article").readmore({ speed: 75, maxHeight: 500 });

Опции

• speed : 100 (в миллисекундах)
• maxHeight : 200 (в пикселях)
• heightMargin : 16 (в пикселях, позволяет избежать ломания блоков, которые лишь немного больше заданной высоты - maxHeight)
• moreLink : "Подробнее"
• lessLink : "Скрыть"
• embedCSS : true (вставляет динамический CSS стили, установите false, если все стили вы будете подключаать сами в своём файле стилей)
• sectionCSS : "display: block; width: 100%;" (устанавливает стиль блоков)
• startOpen : false (по дефолту блок скрыт, при параметре true - текст будет показан полностью, но с возможностью скрыть)
• expandedClass : "readmore-js-expanded" (класс добавляемый к развернутому блоку)
• collapsedClass : "readmore-js-collapsed" (класс добавляемый к свернутому блоку)
• beforeToggle : function() {} (функция вызываемая после нажатия на кнопку "Подробнее" или "Скрыть", но до того, как блок свернется или развернется)
• afterToggle : function() {} (функция вызываемая после того, как блок развернется или свернется)

Если у элемента задана максимальная высота в CSS стилях, то плагин будет использовать именно это значение, а не значение опции maxHeight

Обратный вызов:

Функции обратного вызова, beforeToggle() и afterToggle() получают те же самые аргументы: trigger , element и more .

• trigger : кнопки "Подробнее" или "Скрыть"
• element : блок, который в настоящее время сворачивается или разворачивается
• more : boolean, true - означает, что блок разворачивается

Пример обратного вызова.
Вот пример использования функции afterToggle , для прокрутки к верхней части блока, когда нажата кнопка "Скрыть ":

$("article").readmore({ afterToggle: function(trigger, element, more) { if(! more) { // кнопка "Скрыть" была нажата $("html, body").animate({ scrollTop: element.offset().top },{ duration: 100 }); } } });

Отключить функционал плагина можно так:

$("article").readmore("destroy");

Или же вы можете указать элемент, на котором плагин не должен работать:

$("article:first").readmore("destroy");

CSS

По умолчанию плагин вставляет следующий CSS код на страницу:

Readmore-js-toggle, .readmore-js-section { display: block; width: 100%; } .readmore-js-section { overflow: hidden; }

С помощью опции плагина можно изменить первое правило:

$("article").readmore({ sectionCSS: "display: inline-block; width: 50%;" });

Если вы хотите использовать свой файл стилей, то в настройках плагина укажите false :

$("article").readmore({ embedCSS: false });

Here"s how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I"m Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There"s a doctor, too, took his genius sister out of some Alliance camp, so they"re keeping a low profile. You got a job, we can do it, don"t much care what it is.

I am Duncan Macleod, born 400 years ago in the Highlands of Scotland. I am Immortal, and I am not alone. For centuries, we have waited for the time of the Gathering when the stroke of a sword and the fall of a head will release the power of the Quickening. In the end, there can be only one.

From this distant vantage point, the Earth might not seem of any particular interest. But for us, it"s different. Consider again that dot. That"s here. That"s home. That"s us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.

Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!