Dynamisch abgeschnittener Text mit Shave.js Plugin

Die meisten WordPress-Blogs verwenden die Funktion "Mehr lesen", um Vorschautext aus einem Beitrag anzuzeigen. Dieser Text wird abgeschnitten und an einer bestimmten Stelle abgeschnitten, um Platz zu sparen und Leser dazu zu ermutigen, weiter zu klicken, um weiter zu lesen .

Aber manchmal möchten Sie diese Funktion auf einer einzigen Seite hinzufügen. Geben Sie Shave.js ein, das JavaScript-Plugin zum dynamischen Abschneiden von Inhalten .

Eine coole Tatsache über dieses Plugin ist, dass es von Dollar Shave Club erstellt wurde, dem Team, das eine der lustigsten Anzeigen gemacht hat, die ich je gesehen habe. Ich war mir nicht bewusst, dass ihr Team sogar eine GitHub-Seite hatte, aber es ist voller Repos, sowohl originell als auch gegabelt.

Dieses spezielle Plugin ist ziemlich neu und hat bereits 800+ Sterne. Es ist unabhängig von Abhängigkeiten, sodass es unabhängig vom Browser oder anderen enthaltenen Bibliotheken auf normalem JavaScript ausgeführt werden kann .

Code-Setup ist auch ziemlich einfach mit der Shave () -Funktion nur zwei Parameter: eine Elementauswahl und eine maximale Höhe für dieses Element. Hier ist ein sehr einfaches Beispiel:

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

Natürlich gibt es zusätzliche Parameter, die Sie nach dem abgeschnittenen Text für benutzerdefinierte Zeichen übergeben können, oder mehrere Selektoren, auf die Sie den Rasureffekt anwenden möchten .

Sie können tatsächlich eine Live-Demo auf der Shave-Plugin-Seite sehen und sie haben auch eine schöne CodePen-Demo.

Shave wurde für die Arbeit mit jQuery oder Zepto entwickelt, wenn Sie eine dieser Bibliotheken bevorzugen. Aber da es auch auf Vanilla JS läuft, ist es eines der einfachsten Plugins, die Sie auf Ihrer Seite finden und benutzen können.

Es gibt nicht zu viele Szenarien, in denen Sie Text abschneiden möchten, aber wenn Sie es tun, ist es viel einfacher, ein Plugin wie Shave zu verwenden, als den gesamten Code selbst zu schreiben.

Laden Sie eine Kopie aus dem GitHub Repo herunter oder ziehen Sie sie aus einem Repo wie npm. Sie finden auch Richtlinien und Dokumentation zum GitHub Repo, so dass Sie buchstäblich nur kopieren, einfügen und rasieren können!

Erstellen Sie minimalistische Responsive Layouts mit Mini.css

Ein Frontend-Framework sollte leicht und einfach zu verwenden sein . Bootstrap ist das beliebteste, obwohl es auch eines der schwersten ist. Und in einer Welt mit vielen Alternativen zu Bootstrap kann es schwierig sein, einen zu finden, den du magst.Mini.css ist ein neueres Framework und macht seinem Namen alle Ehre

(Tech- und Design-Tipps)

Gemeinsame Weihnachtsverpackungsfehler (Wie man sie vermeidet)

Für die Ferien weg von der Familie sein? Hast du schon mit dem Weihnachtseinkauf begonnen? Es wird bald Zeit sein, sie abzuschicken ( Sie brauchen einen Vorsprung, um die Verzögerungen zu überwinden) und um den Postprozess reibungsloser zu machen, hier sind ein paar einfache Tipps von collectplus.co

(Tech- und Design-Tipps)