Dynaaminen lyhennetty teksti, jossa on Shave.js-laajennus

Useimmat WordPress-blogit käyttävät "lue lisää" -ominaisuutta näyttääksesi tekstin esikatselusta. Tämä teksti on lyhennetty ja leikattu tietyssä kohdassa tilan säästämiseksi kannustaa lukijoita napsauttamaan edelleen, jotta he pitävät lukemista.

Mutta joskus haluat lisätä tämän ominaisuuden yhdelle sivulle. Anna Shave.js, JavaScript-laajennus sisältöä dynaamisesti.

Viileä tosiasia tästä pluginista on se, että sen on luonut Dollar Shave Club, joukkue, joka teki yhden hauskimmista mainoksista, joita olen koskaan nähnyt. En tiennyt, että heidän tiiminsä oli edes GitHub-sivu, mutta se on täynnä alkuperäisiä ja haarautuneita repoja.

Tämä nimenomainen plugin on melko uusi ja sillä on jo 800+ tähteä. Se on riippuvainen, joten se on voi ajaa tavallisessa JavaScriptissä selaimesta tai muista mukana olevista kirjastoista riippumatta.

Koodiasetus on myös melko yksinkertainen parranajo() toiminto vain kaksi parametria: an elementinvalitsin ja a max korkeus kyseiselle elementille. Seuraavassa on hyvin perus esimerkki:

 maxheight = 320; parranajo ('. elemclass', maxheight); 

Luonnollisesti on olemassa ylimääräisiä parametreja, jotka voit siirtää mukautettuja merkkejä varten lyhennetyn tekstin jälkeen, tai useita valitsimia, joissa haluat käyttää ajella vaikutusta.

Voit todella nähdä live-demon Shave-plugin-sivustosta ja heillä on myös hyvä CodePen-demo.

Parranajo on rakennettu työskentele jQuery- tai Zepto-ohjelmassa jos haluat jommankumman näistä kirjastoista. Mutta koska se on myös toimii vanilja JS: llä se on yksi helpoimmista laajennuksista, joita voit pudottaa sivustoosi ja aloittaa käytön.

Ei ole liian monta skenaariota, joissa haluat lyhentää tekstiä, mutta kun teet sen paljon helpommin käyttää Shave-ohjelmistoa kuin kirjoittaa kaikki koodit itse.

Aloittaaksesi, lataa kopio GitHub-reposta tai vedä reposta kuten npm. Löydät myös ohjeet ja asiakirjat GitHub-reposta, jotta voit kirjaimellisesti vain kopioida, liittää ja saada parranajon.!