Teks Terpotong Dinamis dengan Plugin Shave.js

Sebagian besar blog WordPress menggunakan fitur "baca lebih lanjut" untuk menampilkan teks pratinjau dari sebuah posting. Teks ini terpotong dan terpotong pada titik tertentu untuk menghemat ruang dan dorong pembaca untuk mengklik lebih jauh untuk terus membaca.

Tetapi terkadang Anda ingin menambahkan fitur ini ke satu halaman. Masukkan Shave.js, plugin JavaScript dibuat untuk konten memotong secara dinamis.

Fakta keren tentang plugin ini adalah plugin ini dibuat oleh Dollar Shave Club, tim yang membuat salah satu iklan terlucu yang pernah saya lihat. Saya tidak tahu tim mereka bahkan memiliki halaman GitHub tetapi penuh dengan repo yang asli dan bercabang dua.

Plugin khusus ini cukup baru dan sudah memiliki 800+ bintang. Ini bebas ketergantungan jadi itu dapat berjalan di JavaScript biasa terlepas dari browser atau perpustakaan yang disertakan lainnya.

Pengaturan kode juga cukup sederhana dengan mencukur() berfungsi hanya mengambil dua parameter: an pemilih elemen dan a tinggi maksimal untuk elemen itu. Berikut ini contoh yang sangat mendasar:

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

Tentu ada parameter tambahan yang dapat Anda berikan untuk karakter khusus setelah teks terpotong, atau banyak penyeleksi tempat Anda ingin menerapkan efek bercukur.

Anda benar-benar dapat melihat demo langsung di situs plugin Shave dan mereka juga memiliki demo CodePen yang bagus.

Cukur dibuat untuk bekerja di jQuery atau Zepto jika Anda lebih suka salah satu dari perpustakaan itu. Tapi karena itu juga berjalan pada vanilla JS itu adalah salah satu plugin termudah untuk masuk ke situs Anda dan mulai menggunakan.

Tidak ada banyak skenario di mana Anda ingin memotong teks, tetapi ketika Anda melakukannya, jauh lebih mudah menggunakan plugin seperti Shave daripada menulis sendiri semua kode.

Untuk memulai, unduh salinan dari repo GitHub atau tarik dari repo seperti npm. Anda juga akan menemukan pedoman dan dokumentasi pada repo GitHub sehingga Anda dapat benar-benar hanya menyalin, menempel, dan bercukur!