Thủ thuật này áp dụng cho tiêu đề bài viết trên trang chủ, đơn giản nó chỉ là một thủ thuật với css nên cũng có thể áp dụng cho recent post (bài viết gần đây), popular post (bài đăng phổ biến), recent comment (bình luận gần đây)....
Công dụng của thủ thuật này chủ yếu tuỳ thuộc vào quan điểm thẩm mỹ của bạn, có thể bạn thích hoặc không nhưng đối với mình nó có lợi là đối với những tiêu đề quá dài so với độ rộng của vùng chứa thì dùng thủ thuật này giúp blog của bạn nhìn sẽ cân đối và chuyên nghiệp hơn.
ngoài ra tiêu đề bị khuất mất một đoạn cũng có thể gây tò mò với người đọc, họ có thể click vào xem rốt cuộc cái bài viết đó trình bày vấn đề gì ^_^
Cách làm như sau:
Bước 1: Bạn cần xác định được ID hoặc Class của tiêu đề bài viết bạn muốn thu gọn là gì, ví dụ mình muốn thu gọn tiêu đề bài viết của danh sách bài viết mới trên trang chủ của blog có class là .index-post .post-info > h2
Bước 2: Thêm vào dưới nó đoạn css dưới đây(đã bao gồm css của class ở trên) là tiêu đề đã được rút gọn rồi.
.index-post .post-info > h2{
text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;
}
trong đó cái đoạn -webkit-line-clamp: 1; thì số 1 là số dòng mà tiêu đề sẽ được rút gọn, trường hợp này mình muốn rút gọn lại còn một dòng thì mình để số 1, phần tiêu đề bị khuất sẽ hiển thị bằng dấu 2 chấm.
tuy nhiên khi bạn thiết kế template responsive thì nên áp dụng thủ thuật này cho một số kích thước màn hình thôi chứ không nên áp dụng hết.
Như vậy là mình đã chia sẻ xong cách rút ngon tiêu đề bài viết cho blogspot rồi, chúc bạn thành công.
No comments :