[Blogger] Cắt chuỗi tiêu đề bài đăng

Trong quá trình lướt web, nếu bạn để ý một chút sẽ có thể bắt gặp những trang hiển thị "thiếu" tiêu đề bài viết và phần bị thiếu được thay thế bởi dấu... Đó cũng là một phương án hay để thu hút độc giả với tiêu đề "ẩn hiện huyền ảo". Và trong bài viết này chúng ta sẽ tìm hiểu cách làm điều đó áp dụng với nền tảng blogger

Việc ẩn đi 1 phần tiêu đề bài viết hay gọi với cái tên cắt chuỗi tiêu đề cũng giúp cho bạn dễ dàng căn chỉnh bố cục bài viết (Ví dụ khi bạn đặt 1 tiêu đề quá dài, không cân xứng với thumbnail có thể sẽ tràn nội dung gây ảnh hưởng tới bố cục cũng như các thành phần khác)

I. Sử dụng CSS

Cách 1. Giới hạn kích thước kết hợp với overflow

Theo đó tôi có thể đặt cho div chứa content một chiều rộng  hoặc chiều cao nhất định, khi tràn nội dung sẽ ẩn đi

+ Theo chiều rộng

<div class="your-div">
[Tutorial] Hướng dẫn trỏ tên miền về Blogspot sử dụng Cloudflare
</div>

<style>
.your-div {
    white-space: nowrap;
    width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

+ Theo chiều cao

<div class="your-div">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>

<style>
.your-div {
    height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* only work in browser use webkit */
    -webkit-box-orient: vertical; /* only work in browser use webkit */
    overflow: hidden;
}
</style>

Phần nội dung tràn sẽ bị ẩn đi hoặc thay bởi dấu ... tùy trình duyệt.

Cách 2: Kết hợp -webkit-line-clamp với text-overflow

Cách này chỉ áp dụng với các trình duyệt sử dụng webkit. Thay vì set chiều cao như cách trên, ta có thể quy định số dòng mà văn bản được phép hiển thị, và phần nội dung tràn sẽ bị ẩn đi và thay bởi dấu ... Code sẽ như sau

<div class="your-div">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>

<style>
.your-div {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box
}
</style>

Bạn có thể thử mã tại đây

Ưu điểm của phương pháp này đó là không sử dụng js, tuy nhiên nhược điểm của nó đó là không hỗ trợ 100% các trình duyệt, cũng như nhiều từ sau khi cắt sẽ trở nên không có nghĩa

II. Sử dụng JavaScript

Có thể trong quá trình làm blog bạn đã đụng tới nó rồi, thường gặp nhất đó là cắt chuỗi nội dung bài viết để làm phần trích dẫn ngoài trang chủ sử dụng substr(). Ta hoàn toàn có thể dùng để cắt tiêu đề bài viết

Để làm được bạn cần tích hợp jQuery, phần tích hợp bạn tự làm. Dán code cắt chuỗi trước thẻ đóng </body>

<script type="text/javascript">//<![CDATA[
// by Hung1001
$(function() {
    $(".post h2 a").each(function(i) {
        var text = $(this).text();
        // console.log(text + ": " + text.length);
        var maxLength = 60 ; // maximum number of characters to extract
        if (text.length > 60) {
            var trimmedString = text.substr(0, maxLength);
            trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")));
            $(this).text(trimmedString + ' ...');
        }
    });
});
//]]></script>

Trong trường hợp hợp muốn cắt nhiều tiêu đề cùng một độ dài có thể ngăn cách bởi dấu ,

Ví dụ $(".post h2 a,.PopularPosts ul li a").each(function()

// console.log(text + ": " + text.length): bạn bỏ phần comment (//) đi, mục đích là để kiểm tra độ dài tiêu đề bài đăng

Bạn kiểm tra nó trong phần console của cửa sổ debug

var maxLength = 60: chính là số lượng kí tự bạn muốn hiển thị, có bao gồm dấu cách

text.length > 60: điều kiện tiến hành cắt chuỗi, căn cứ theo độ dài từ // console.log(text + ": " + text.length), bạn căn chỉnh giá trị này để tiến hành cắt chuỗi, tiêu đề có length nhỏ hơn giá trị // console.log(text + ": " + text.length) sẽ không bị cắt. Sau khi hoàn tất bạn có thể xóa dòng // console.log(text + ": " + text.length) đi để tránh ghi log

Lợi ích của phương pháp này đó là từ sẽ không bị mất nghĩa như cách 1 (tiêu chí cắt chuỗi sẽ dựa vào dấu cách), có thể cắt được mọi tiêu đề (auto readmore, popular post...). Tuy nhiên dùng js đương nhiên sẽ khiến trang nặng hơn 1 chút

KẾT LUẬN: như vậy tôi đã hướng dẫn xong cách cắt chuỗi tiêu đề bài đăng blogger, việc cắt chuỗi này rất cần thiết cho bạn nào muốn tạo bố cục theo khuôn mẫu, không muốn tràn nội dung vì tiêu đề bài đăng

Để lại bình luận nếu bạn gặp khó khăn và Chúc thành công !