Динамічний обрізаний текст за допомогою модуля Shave.js

Більшість блогів WordPress використовують функцію "читати більше", щоб показати текст попереднього перегляду з повідомлення. Цей текст урізається і обрізається в певний момент, щоб заощадити простір і заохочувати читачів натискати далі, щоб продовжувати читати.

Але іноді потрібно додати цю функцію на одну сторінку. Введіть для цього модуль JavaScript динамічно відсікаючи вміст.

Прохолодний факт про цей плагін є те, що він створений Dollar Shave Club, командою, яка зробила одну з найсмішніших оголошень, яку я коли-небудь бачив. Я не знав, що їх команда навіть мала сторінку GitHub, але вона повна оригінальних і роздвоєних репо.

Цей плагін є досить новим, і він вже має 800+ зірок. Це не залежність від нього може працювати на звичайному JavaScript, незалежно від браузера або інших включених бібліотек.

Налаштування коду також досить просте голити () Функція приймає тільки два параметри: a селектор елементів а макс. висота для цього елемента. Ось дуже простий приклад:

 maxheight = 320; гоління ('. elemclass', maxheight); 

Природно є додаткові параметри, які ви можете передати для спеціальних символів після скороченого тексту або кілька селекторів, де потрібно застосувати ефект гоління.

Ви дійсно можете побачити живий демо на сайті плагіна Shave, і вони також мають хорошу демо-версію CodePen.

Для гоління створено працювати на jQuery або Zepto якщо ви віддаєте перевагу будь-якій з цих бібліотек. Але оскільки це теж працює на ванільному JS це один з найпростіших додатків, які можна скинути на ваш сайт і почати використовувати.

Не так вже й багато сценаріїв, де ви хочете скоротити текст, але коли ви робите це, набагато простіше використовувати плагін, як Shave, ніж писати весь код самостійно.

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