Dinamično okrnjeno besedilo z vtičnikom Shave.js

Večina spletnih dnevnikov WordPress uporablja funkcijo »preberi več«, da prikaže besedilo predogleda objave. To besedilo je obrezano in odrezano na določeni točki, da se prihrani prostor in bralce spodbudite, da kliknejo še naprej, da bi še naprej brali.

Ampak včasih boste želeli dodati to funkcijo na eno samo stran. Vnesite Shave.js, za katerega ste pripravili JavaScript dinamično obrezovanje vsebine.

Kul dejstvo v zvezi s tem vtičnikom je, da ga je ustvaril Dollar Shave Club, ekipa, ki je ustvarila enega izmed najbolj smešnih oglasov, ki sem jih kdaj videl. Nisem se zavedal, da je njihova ekipa celo imela GitHub stran, vendar je polna repo originalnih in forked.

Ta plugin je precej nov in že ima 800+ zvezdic. Brez odvisnosti je tako lahko deluje na navadnem JavaScriptu, ne glede na brskalnik ali druge vključene knjižnice.

Nastavitev kode je prav tako preprosta britje () funkcija samo ob dveh parametrih: a izbirnik elementov in a največja višina za ta element. Tu je zelo osnovni primer:

 maxheight = 320; britje (". elemclass", maxheight); 

Seveda obstajajo za dodatne znake lahko posredujete dodatne parametre po skrajšanem besedilu ali več izbirnikov, kjer želite uporabiti učinek britja.

Dejansko lahko vidite demo v živo na spletnem mestu Shave plugin in imajo tudi lepo demo CodePen.

Za britje je zgrajeno delo na jQuery ali Zepto če imate raje katero od teh knjižnic. Ampak tudi zato teče na vanili JS to je eden izmed najlažjih vtičnikov, ki jih lahko spustite na vaše spletno mesto in začnete uporabljati.

Ni preveč scenarijev, kjer boste želeli skrajšati besedilo, toda ko to storite, je veliko lažje uporabiti vtičnik, kot je Shave, kot da sami napišete celotno kodo..

Če želite začeti, prenesite kopijo iz GitHub repo ali povlecite iz repo kot npm. Prav tako boste našli smernice in dokumentacijo o GitHub repo, tako da lahko dobesedno preprosto kopirate, prilepite in dobite britje!