Teks Dinamik Terancam dengan Plugin Shave.js

Kebanyakan blog WordPress menggunakan ciri "baca lebih lanjut" untuk menunjukkan teks pratonton dari siaran. Teks ini dipotong dan dipotong pada titik tertentu untuk menjimatkan ruang dan untuk menggalakkan pembaca untuk klik terus untuk terus membaca.

Tetapi kadang-kadang anda akan mahu menambah ciri ini ke satu halaman. Masukkan Shave.js, plugin JavaScript dibuat untuk kandungan pemotongan dinamik.

Fakta yang keren tentang plugin ini adalah bahawa ia dicipta oleh Dolar Shave Club, pasukan yang membuat salah satu iklan paling lucu yang pernah saya lihat. Saya tidak tahu pasukan mereka walaupun mempunyai halaman GitHub tetapi ia penuh dengan repos kedua-dua asal dan bercabang.

Plugin khusus ini agak baru dan sudah mempunyai 800+ bintang. Ia bergantung kepada kebergantungan boleh berjalan di JavaScript biasa tanpa mengira pelayar atau perpustakaan lain yang termasuk.

Seting kod juga cukup mudah dengan mencukur () fungsi hanya mengambil dua parameter: a pemilih elemen dan a ketinggian maksimum untuk elemen itu. Berikut adalah contoh yang sangat asas:

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

Sememangnya ada parameter tambahan yang boleh anda lulus untuk aksara tersuai selepas teks dipenggal, atau pelbagai seleksi di mana anda ingin memohon kesan mencukur.

Anda sebenarnya boleh melihat demo langsung di laman plugin Cukur dan mereka juga mempunyai demo CodePen yang bagus juga.

Cukur dibina untuk kerja di jQuery atau Zepto jika anda lebih suka sama ada dari perpustakaan tersebut. Tetapi kerana ia juga berjalan di atas vanila JS ia adalah salah satu plugin termudah untuk diletakkan ke dalam laman anda dan mula menggunakan.

Tidak banyak senario di mana anda mahu memotong teks, tetapi apabila anda melakukannya lebih mudah untuk menggunakan plugin seperti Shave daripada menulis semua kod itu sendiri.

Untuk memulakan, muat turun salinan dari repo GitHub atau tarik dari repo seperti npm. Anda juga akan mendapati garis panduan dan dokumentasi mengenai repo GitHub supaya anda boleh menyalin, menampal, dan mencukur secara harfiah!