Динамический усеченный текст с плагином Shave.js

Большинство блогов WordPress используют функцию «читать дальше», чтобы показать предварительный текст из сообщения. Этот текст обрезается и обрезается в определенной точке, чтобы сэкономить место и поощряйте читателей нажимать дальше, чтобы продолжить чтение.

Но иногда вы захотите добавить эту функцию на одну страницу. Войдите в Shave.js, плагин JavaScript, созданный для динамически усеченный контент.

Интересным фактом об этом плагине является то, что он создан Dollar Shave Club, командой, которая сделала одну из самых забавных рекламных объявлений, которые я когда-либо видел. Я не знал, что у их команды даже была страница GitHub, но там полно репо, как оригинальных, так и разветвленных..

Этот конкретный плагин довольно новый и уже имеет более 800 звезд. Это без зависимостей, так что может работать на обычном JavaScript независимо от браузера или других включенных библиотек.

Настройка кода также довольно проста с брить () функция принимает только два параметра: селектор элементов и максимальная высота для этого элемента. Вот очень простой пример:

 максимальная высота = 320; бритье ('. elemclass', maxheight); 

Естественно есть дополнительные параметры, которые вы можете передать для пользовательских символов после усеченного текста, или несколько селекторов, где вы хотите применить эффект бритья.

На сайте плагинов Shave вы можете увидеть живую демоверсию, и у них тоже есть отличная демоверсия CodePen..

Бритье построено на работать на JQuery или Zepto если вы предпочитаете любую из этих библиотек. Но так как это также работает на ванили JS это один из самых простых плагинов, чтобы зайти на ваш сайт и начать использовать.

Существует не так уж много сценариев, в которых вы хотите обрезать текст, но когда вы это делаете, гораздо проще использовать такой плагин, как Shave, чем писать весь код самостоятельно..

Для начала загрузите копию с репозитория GitHub или извлеките репозиторий, например, npm. Вы также найдете рекомендации и документацию по репозиторию GitHub, чтобы вы могли буквально просто копировать, вставлять и брить!