Text dinamic trunchiat cu Plugin Shave.js

Cele mai multe bloguri WordPress folosesc funcția "citiți mai multe" pentru a afișa textul de previzualizare dintr-o postare. Acest text este trunchiat și tăiat la un anumit punct pentru a economisi spațiu și pentru a încurajați cititorii să facă clic mai departe pentru a continua să citească.

Dar, uneori, veți dori să adăugați această funcție pe o singură pagină. Introduceți Shave.js, plugin-ul JavaScript făcut pentru conținut dinamic trunchiat dinamic.

Un fapt interesant despre acest plugin este că acesta este creat de Dollar Shave Club, echipa care a făcut unul dintre cele mai amuzante anunțuri pe care le-am văzut vreodată. Nu mi-am dat seama că echipa lor avea chiar o pagină GitHub, dar este plină de repo, atât originale cât și furculite.

Acest plugin particular este destul de nou și are deja 800 de stele. Este dependent de dependență poate rula pe JavaScript simplu indiferent de browser sau alte biblioteci incluse.

Setarea codului este, de asemenea, destul de simplă cu bărbierit() funcționează doar doi parametri: an element selector și a înălțime maximă pentru acel element. Iată un exemplu foarte bun:

 maxheight = 320; ras ("elemclass", maxheight); 

Desigur, există parametrii suplimentari pe care îi puteți transmite pentru caracterele personalizate după textul trunchiat, sau selectori multipli în care doriți să aplicați efectul de bărbierit.

Puteți vedea efectiv un demo live pe site-ul Plugin Shave și ei au un demo frumos CodePen prea.

Razele este construit pentru a lucrați pe jQuery sau Zepto dacă preferați oricare dintre aceste biblioteci. Dar din moment ce, de asemenea rulează pe vanilie JS este unul dintre cele mai ușoare pluginuri care se pot plasa în site-ul dvs. și puteți începe să utilizați.

Nu există prea multe scenarii în care veți dori să trunchiați textul, dar când faceți acest lucru este mult mai ușor să utilizați un plugin ca Shave decât să scrieți singur întregul cod.

Pentru a începe, descărcați o copie din repo GitHub sau trageți dintr-un repo ca npm. Veți găsi, de asemenea, linii directoare și documentație privind repo GitHub, astfel încât să puteți doar să copiați, să lipiți și să obțineți bărbierit!