Share Cắt ngắn nội dung trên website với thư viện Shave

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Trình bày nội dung trên website đảm bảo không bị tràn ra ngoài phạm vi cho phép là điều cần thiết để tạo thẩm mỹ cho website. Thông thường để thực hiện việc này các bạn lập trình viên sẽ viết hàm cắt ngắn chuỗi theo một chiều dài chỉ định, các bạn có thể xử lý việc cắt ngắn này từ ngôn ngữ lập trình như PHP, C# hay xử lý tại máy khách bằng hàm JavaScript. Đây là cách cắt ngắn chuỗi theo số lượng ký tự hoặc từ được chỉ định, tuy nhiên trong nhiều trường hợp cách tính theo số lượng ký tự hoặc từ không hoàn toàn đáp ứng được việc trình bày nội dung, tức nội dung vẫn có thể bị tràn ra ngoài phạm vi hoặc quá ngắn. Nguyên nhân xãy ra tình trạng này là do chiều rộng của các ký tự, các từ là không giống nhau nên đôi lúc sẽ có chuỗi không đạt đúng độ dài mong muốn. Để khắc phục tình trạng này, các bạn có thể sử dụng thư viện Shave.

Thư viện Shave cũng dùng để cắt nội dung nhưng không dựa vào độ dài của chuỗi mà dựa vào kích thước thành phần chứa chuỗi, các bạn có thể chỉ định chiều cao tối đa mà thành phần đó có thể đạt tới để chứa nội dung bên trong. Các bạn cũng cần lưu ý là Shave hoàn toàn khác so với việc các bạn định nghĩa chiều cao tối đa của thành phần bằng thuộc tính max-height trong CSS. Điều này được thể hiện rất rõ ở việc nội dung được cắt bởi Shave sẽ đủ chỗ hiển thị và có thể chèn thêm ký tự đánh dấu chuỗi bị cắt (Thường sử dụng dấu ba chấm).

Để sử dụng thư viện Shave, các bạn tải bằng công cụ NPM với dòng lệnh sau:
Code:
npm install shave --save
Và tích hợp vào website với dòng lệnh sau:
HTML:
<script src="path/to/shave.min.js"></script>
Bây giờ, các bạn có thể cắt ngắn nội dung trên một thành phần nào đó như ví dụ sau:
JavaScript:
shave(
    '#shave',
    100,
    {
        character: '...'
    }
);
Các bạn có thể tìm hiểu thêm về thư viện Shave tại địa chỉ https://github.com/dollarshaveclub/shave.
 
Back
Top