Texte tronqué dynamique avec le plugin Shave.js

La plupart des blogs WordPress utilisent la fonctionnalité "En savoir plus" pour afficher un aperçu du texte d'un message. Ce texte est tronqué et coupé à un moment donné pour économiser de l’espace et encourager les lecteurs à cliquer plus loin pour continuer à lire.

Mais parfois, vous voudrez ajouter cette fonctionnalité sur une seule page. Entrez Shave.js, le plugin JavaScript conçu pour tronquer dynamiquement le contenu.

Un fait intéressant à propos de ce plugin est qu’il a été créé par Dollar Shave Club, l’équipe qui a réalisé l’une des publicités les plus drôles que j’ai jamais vues. Je ne savais pas que leur équipe possédait même une page GitHub, mais elle est remplie de pensions à la fois originales et fourchues..

Ce plugin est relativement nouveau et compte déjà plus de 800 étoiles. C'est sans dépendance, donc peut fonctionner en JavaScript, quel que soit le navigateur ou les autres bibliothèques incluses.

La configuration du code est également assez simple avec le se raser() fonction ne prenant que deux paramètres: un sélecteur d'élément et un hauteur maximum pour cet élément. Voici un exemple très basique:

 hauteur maximale = 320; raser ('. elemclass', maxheight); 

Naturellement il y a paramètres supplémentaires que vous pouvez transmettre pour les caractères personnalisés après le texte tronqué, ou sélecteurs multiples où vous voulez appliquer l'effet de rasage.

Vous pouvez réellement voir une démo en direct sur le site du plugin Shave et ils ont aussi une belle démo CodePen.

Le rasage est construit pour travailler sur jQuery ou Zepto si vous préférez l'une ou l'autre de ces bibliothèques. Mais puisque c'est aussi fonctionne à la vanille JS c'est l'un des plugins les plus faciles à installer sur votre site et à commencer à utiliser.

Il n'y a pas beaucoup de scénarios où vous voudrez tronquer du texte, mais quand vous le faites, il est beaucoup plus facile d'utiliser un plugin comme Shave que d'écrire tout le code vous-même..

Pour commencer, téléchargez une copie du référentiel GitHub ou extrayez-la d'un référentiel tel que npm. Vous trouverez également des instructions et de la documentation sur le dépôt GitHub pour pouvoir simplement copier, coller et raser.!