Văn bản rút gọn động với Plugin Shave.js

Hầu hết các blog WordPress sử dụng tính năng "đọc thêm" để hiển thị văn bản xem trước từ một bài đăng. Văn bản này bị cắt ngắn và cắt ở một điểm nhất định để tiết kiệm không gian và khuyến khích độc giả nhấp thêm để tiếp tục đọc.

Nhưng đôi khi bạn sẽ muốn thêm tính năng này vào một trang. Nhập Shave.js, plugin JavaScript được tạo cho nội dung cắt ngắn động.

Một sự thật thú vị về plugin này là nó được tạo bởi Dollar Shave Club, nhóm đã tạo ra một trong những quảng cáo hài hước nhất mà tôi từng thấy. Tôi không biết nhóm của họ thậm chí đã có trang GitHub nhưng nó có đầy đủ các bản repos cả bản gốc và bản ngã ba.

Plugin đặc biệt này khá mới và nó đã có hơn 800 sao. Nó không phụ thuộc nên nó có thể chạy trên JavaScript đơn giản bất kể trình duyệt hoặc các thư viện đi kèm khác.

Thiết lập mã cũng khá đơn giản với cạo râu () Hàm chỉ lấy hai tham số: một bộ chọn phần tử và một chiều cao tối đa cho yếu tố đó. Đây là một ví dụ rất cơ bản:

 cực đại = 320; cạo râu ('. elem class', maxheight); 

Tự nhiên có tham số bổ sung bạn có thể vượt qua cho các ký tự tùy chỉnh sau văn bản rút gọn, hoặc nhiều bộ chọn nơi bạn muốn áp dụng hiệu ứng cạo râu.

Bạn thực sự có thể xem bản demo trực tiếp trên trang web của plugin Shave và họ cũng có bản demo CodePen đẹp.

Cạo được xây dựng để hoạt động trên jQuery hoặc Zepto nếu bạn thích một trong những thư viện đó Nhưng vì nó cũng chạy trên vanilla JS đó là một trong những plugin dễ dàng nhất để truy cập trang web của bạn và bắt đầu sử dụng.

Không có quá nhiều kịch bản mà bạn sẽ muốn cắt bớt văn bản, nhưng khi bạn thực hiện việc sử dụng một plugin như Shave sẽ dễ dàng hơn nhiều so với việc tự viết tất cả mã.

Để bắt đầu, hãy tải xuống một bản sao từ repo GitHub hoặc kéo từ một repo như npm. Bạn cũng sẽ tìm thấy các hướng dẫn và tài liệu về repo GitHub để bạn có thể sao chép, dán và cạo râu theo nghĩa đen!