Thu gọn tiêu đề bài viết trên WordPress bằng CSS
Như tiêu đề thì hôm nay mình chia sẻ đến các bạn cách làm cho tiêu đề bài viết chỉ hiển thị 02 dòng trên WordPress ( thu gọn tiêu đề ) bằng CSS.
Tính ứng dụng, hay thủ thuật này nó có ích lợi gì ?
Tiêu đề nghe có vẻ nó được dành riêng cho WordPress nhưng mà không, nó dành chung cho mọi loại web, miễn là có xài CSS 😀
Các bạn có thể áp dụng thủ thuật này ở những chỗ như: tiêu đề bài viết trên trang chủ, 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),…
Tác dụng hay ích lợi của nó cũng tùy thuộc vào quan điểm thẩm mỹ của bạn, cũng có thể bạn thích hoặc không nhưng đối với mình thì nó có lợi như sau:
- Cắt gọn những tiêu đề quá dài so với mặt bằng chung để cái danh sách nó được đều và chuyên nghiệp hơn;
Thu gọn tiêu đề bài viết trên WordPress bằng CSS
- 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ũng có thể click vào xem xem rốt cuộc cái bài đó nó có tiêu đề gì :v
Cách thu gọn tiêu đề bài viết trên WordPress bằng CSS
Như ở trên mình có nói là nó dành cho tất cả các loại web chứ không riêng gì WordPress, ở đây mình áp dụng trên WordPress nên sẽ làm như sau:
Bước 1: Tìm ID hoặc class của nhóm tiêu đề bạn muốn thu gọn, ví dụ ở đây mình muốn thu gọn tiêu đề của danh sách bài viết mới trên trang chủ của Hocban.vn thì mình tìm đến class:
|
1 |
.widget-category-posts .small-post .entry-title |
Bước 2: Thêm vào bên dưới nó đoạn CSS sau (đã bao gồm class ở trên luôn) là tiêu đề nó được rút gọn rồi đấy:
|
1 2 3 4 5 6 7 |
.widget-category-posts .small-post .entry-title { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } |
Bài viết được tham khảo từ: Blogchiasethuthuat.com
Như vậy là mình đã chia sẻ xong cách thu gọn tiêu đề bài viết trên WordPress rồi đấy, anh em cũng làm thử xem có đẹp hơn không nhé ! 😀
Hocban.vn
Công nhận trang bác tịnh load nhanh thật !
Mới chuyển host qua bên AZDIGI đó Phước ĐT :v
Mới đổi sang hosting mới thấy nhanh phết đấy bác 😀
Hề hề, xài cũng được phết bác ạ :p dạo này em mắc quá không viết bài với đi chém gió với anh em được 😀
Ít bình loạn quá nạ, dẫy lên nào ace ê :v
Dạo này Tịnh Nguyễn bỏ bê con Hocban.vn cũng tội nghiệp ghê, do đang bận làm một số thứ nên ko dành nhiều thời gian cho nó được, xong vụ này là sẽ cho nó quẩy lên 😀
Đang làm cái dâm (theme) khác cho em nó à? :3
Ko, sửa theme cho site mới. Mà theme ngon nhiều chức năng quá nên mần hơi bị lâu :v
Quào, dâm cho blog.hocban à :3 định làm chủ đề gì đó?
Không, cho cái site chia sẻ theme WordPress ấy mà :v Sưu tầm được bao nhiêu theme đẹp mà ko giới thiệu anh em thì cũng phí :v
Ơ blog bác không có reply cho cấp thứ 2 à? k thấy nút trả lời đâu
Có 02 cấp bình luận à Phan Hùng, hôm có viết một bài về lý do chọn 02 cấp comment, anh em tham khảo qua nhé !
Cám ơn bạn về kiến thức này. Mình đang tìm hiểu thêm về css.
Khà khà, em cũng có tài liệu học CSS cho người mới (dân không chuyên) bác có yêu thích thì đọc thử nhé !
Học CSS Cơ Bản
Trước cái thời e làm WAPSITE có sử dụng nhưng chuyển qua web thì thôi rồi 😀
Vì trên điện thoại nên phải giới hạn tiêu đề lại đúng không nhờ ? Dạo trước cái recent comments của Hocban.vn cái dài cái ngắn nhìn rất mất cân đối, nhờ cái này cũng đỡ hơn 😀