Dynamiczny obcięty tekst z wtyczką Shave.js

Większość blogów WordPress używa funkcji „czytaj więcej”, aby wyświetlić tekst podglądu z posta. Ten tekst jest obcięty i odcięty w pewnym momencie, aby zaoszczędzić miejsce i zachęcaj czytelników do dalszego klikania, aby kontynuować czytanie.

Ale czasami będziesz chciał dodać tę funkcję do jednej strony. Wpisz Shave.js, stworzoną wtyczkę JavaScript dynamicznie obcinanie treści.

Fajnym faktem na temat tej wtyczki jest to, że została stworzona przez Dollar Shave Club, zespół, który stworzył jedną z najśmieszniejszych reklam, jakie kiedykolwiek widziałem. Nie wiedziałem, że ich drużyna ma nawet stronę GitHub, ale jest pełna repozytoriów zarówno oryginalnych, jak i rozwidlonych.

Ta konkretna wtyczka jest dość nowa i ma już ponad 800 gwiazdek. To jest wolne od zależności może działać na zwykłym JavaScript bez względu na przeglądarkę lub inne dołączone biblioteki.

Konfiguracja kodu jest również dość prosta dzięki golić się() funkcja przyjmuje tylko dwa parametry: an selektor elementów i a maksymalna wysokość dla tego elementu. Oto bardzo prosty przykład:

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

Oczywiście są dodatkowe parametry, które możesz przekazać za niestandardowe znaki po obciętym tekście lub wiele selektorów, w których chcesz zastosować efekt golenia.

Możesz zobaczyć demo na żywo na stronie wtyczki Shave, a także ładne demo CodePen.

Golenie jest wbudowane w pracować na jQuery lub Zepto jeśli wolisz którąś z tych bibliotek. Ale od tego też działa na waniliowym JS to jedna z najłatwiejszych wtyczek, które możesz wrzucić na swoją stronę i zacząć używać.

Nie ma zbyt wielu scenariuszy, w których chciałbyś obcinać tekst, ale kiedy to zrobisz, znacznie łatwiej będzie użyć wtyczki, takiej jak Shave, niż samemu napisać cały kod.

Aby rozpocząć, pobierz kopię z repozytorium GitHub lub wyciągnij z repo, np. Npm. Znajdziesz tu również wskazówki i dokumentację dotyczącą repozytorium GitHub, dzięki czemu możesz dosłownie kopiować, wklejać i golić!