Dynamisk avkortad text med Shave.js-plugin

De flesta WordPress-bloggar använder funktionen "läs mer" för att visa förhandsgranskningstext från ett inlägg. Denna text är avkortad och avskurna vid en viss punkt för att spara utrymme och till uppmuntra läsare att klicka vidare för att fortsätta läsa.

Men ibland vill du lägga till den här funktionen på en enda sida. Ange Shave.js, JavaScript-plugin gjord för dynamiskt trunkerande innehåll.

Ett coolt faktum om det här pluginet är att det skapades av Dollar Shave Club, laget som gjorde en av de roligaste annonserna jag någonsin sett. Jag var inte medveten om deras lag hade även en GitHub-sida men den är full av repos både original och forked.

Det här pluginet är ganska nytt och det har redan 800 + stjärnor. Det är beredskapslöst så det kan köras på vanlig JavaScript oavsett webbläsaren eller andra inkluderade bibliotek.

Kodinställningen är också ganska enkel med rakning() funktionen bara tar två parametrar: an elementväljare och a maximal höjd för det här elementet. Här är ett mycket grundläggande exempel:

 maxhöjd = 320; rakning ('elemclass', maxhöjd); 

Naturligtvis finns det Extra parametrar du kan skicka för anpassade tecken efter den stympade texten, eller flera väljare där du vill tillämpa rakningseffekten.

Du kan faktiskt se en live demo på Shave-plugin-webbplatsen och de har också en bra CodePen-demo.

Rakning är byggd för arbeta på jQuery eller Zepto om du föredrar någon av dessa bibliotek. Men sedan det också körs på vanilj JS Det är en av de enklaste pluginsna att släppa in på din webbplats och börja använda.

Det finns inte så många scenarier där du vill avkorta text, men när du gör det är det mycket lättare att använda ett plugin som Shave än att själv skriva hela koden.

För att komma igång ladda ner en kopia från GitHub repo eller dra från en repo som npm. Du hittar också riktlinjer och dokumentation på GitHub-repo, så du kan bokstavligen bara kopiera, klistra in och få rakning!