Testo troncato dinamico con plugin Shave.js
La maggior parte dei blog di WordPress utilizza la funzione "leggi di più" per mostrare il testo di anteprima da un post. Questo testo viene troncato e tagliato a un certo punto per risparmiare spazio e a incoraggiare i lettori a fare clic più avanti per continuare a leggere.
Ma a volte ti consigliamo di aggiungere questa funzione su una singola pagina. Inserisci Shave.js, il plugin JavaScript creato per troncare dinamicamente il contenuto.
Un fatto interessante su questo plugin è che è stato creato da Dollar Shave Club, il team che ha realizzato una delle pubblicità più divertenti che abbia mai visto. Non sapevo che il loro team avesse una pagina GitHub ma è piena di repository sia originali che biforcati.
Questo particolare plugin è abbastanza nuovo e ha già più di 800 stelle. È privo di dipendenza quindi può funzionare su JavaScript semplice indipendentemente dal browser o da altre librerie incluse.
La configurazione del codice è anche piuttosto semplice con farsi la barba() funziona solo prendendo due parametri: a selettore di elementi e a altezza massima per quell'elemento Ecco un esempio molto semplice:
maxheight = 320; radersi ('. elemclass', maxheight); Naturalmente ci sono parametri extra che puoi passare per caratteri personalizzati dopo il testo troncato, o più selettori in cui si desidera applicare l'effetto di rasatura.
Puoi vedere una demo dal vivo sul sito del plugin Shave e hanno anche una bella demo CodePen.
Shave è costruito per lavora su jQuery o Zepto se preferisci una di quelle librerie. Ma dal momento che anche gira su Vanilla JS è uno dei plugin più facili da inserire nel tuo sito e iniziare a utilizzare.
Non ci sono troppi scenari in cui vorresti troncare il testo, ma quando lo fai è molto più semplice usare un plugin come Shave piuttosto che scrivere tutto il codice da solo.
Per iniziare, scarica una copia dal repository GitHub o estrai da un repository come npm. Troverai anche le linee guida e la documentazione sul repository GitHub in modo da poter letteralmente copiare, incollare e ottenere la rasatura!
