Thu gọn tiêu đề bài viết trên WordPress, Blogspot 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 (Blogspot luôn), nó còn có cách gọi khác là thu gọn hoặc rút gọn tiêu đề bằng CSS. 

Tính ứng dụng, hay thủ thuật này nó có ích lợi gì ?

Đọc tiêu đề nghe có vẻ nó được dành riêng cho WordPress nhưng mà không, mọi người có thể thực hiện trên Blogspot hoặc web code tay cũng đều được, vì nó đơn giản là một thủ thuật với CSS ấy mà.

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 gon tieu de bai viet tren wordpress bang CSS

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:

.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:

.widget-category-posts .small-post .entry-title {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

Trong đó, cái dòng cuối cùng -webkit-line-clamp: 2; thì số 2 tức là số dòng tối đa mà tiêu đề sẽ được rút gọn.

Trong trường hợp áp dụng CSS trên không được thì bạn sử dụng đoạn bên dưới đây nhé:

.tieu-de {
display: inline-block;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Tuy nhiên mình cũng chỉ áp dụng cái này trong một số kích thước màn hình thôi chứ không áp dụng hết. Phần tiêu đề bài viết này mình áp dụng cho recent comment là chính vì tên của người bình luận nó vô chừng, đủ kiểu dài ngắn khác nhau nên phải dùng nó để gọt lại bớt cho gọn.

Thực hiện trên Blogspot

Tương tự như đối WordPress, bạn cần xem ID / class cần thu gọn tiêu đề nó là gì, tiếp theo là truy cập vào phần tùy chỉnh nâng cao của Template >> tìm đến chỗ CSS bổ sung và thêm CSS tương tự như trên vào là được.

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é ! 😀

Bài viết được đề xuất

guest
52 Comments
Inline Feedbacks
View all comments
Học Luật <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">43</span><span style="color: #2196f3;">) </span>
Guest

Đây là cách làm của những người có gu thẩm mỹ cao, haha. Nó đem lại cho người truy cập web cảm giác gọn gàng, ngăn nắp và dễ nhìn. Nếu bổ sung thêm cái thẻ title=”Tiêu đề” để khi người truy cập nhấp chuột vào sẽ thấy đầy đủ tiêu đề của bài viết thì sẽ ok hơn.

Học Luật <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">43</span><span style="color: #2196f3;">) </span>
Guest

Oke bác, cơ mà ý em là dùng máy tính khi rê chuột vào thì nó sẽ tự động hiển thị cái tilte ở ngay vị trí rê chuột ý chứ không phải là cái url ở góc màn hình.
Demo: comment image

conyeucute <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest

Admin cho hỏi làm sao để tìm được ID hoặc class của nhóm tiều đề bài viết ?

conyeucute@gmail.com <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest

Chào Admin,

Web của mình là tichchu.com, mình muốn giới hạn tiêu đề chỉ còn 2 dòng thôi (hiện giờ có bài viết tiêu đề 3 dòng, bài thì 2 dòng) ở tất cả các vị trí từ trang chủ, trang cấp 2 và trang chi tiết bài viết (bài viết liên quan bên dưới).

Cảm ơn ad!

conyeucute@gmail.com <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest

Ad ơi mình có gửi lời mời kết bạn và nhắn tin cho ad rồi, lúc nào rảnh nhờ ad xem giúp mình nha. Fb mình là Tích Chu

Cảm ơn ad!

conyeucute@gmail.com <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest

Mình cảm ơn, nhờ admin xem và giúp mình với.

Cảm ơn ạ!

Back.97 <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
Back.97 (1)

Bạn có thể làm riêng 1 bài hướng dẫn về blogspot ko?

Đạt Nguyễn <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">166</span><span style="color: #2196f3;">) </span>
Thành viên

Có nhiều bài ngắn gọn nhỏ nhỏ hay hay của bác Tịnh hay lên top google quá nhỉ, đang dev lại themes con web truyện, dạo quanh quanh kiếm hàng :))

Homedy <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest

Thanks bạn. Trước nay vẫn khó chịu với tiêu đề dòng dài dòng ngắn. May mà có bài này.

Homedy <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Homedy (4) (4)

Bạn có thể xem theme Bimber trên themeforest đó. Mình đang sử dụng theme này rồi tùy chỉnh lại để hợp với mình luôn.

Homedy <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Homedy (4) (4)

Có. Blog của mình đây: cunglaptrinh.com

Homedy <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Homedy (4) (4)

Không bạn. Web công ty thôi.

Trần Dương <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">30</span><span style="color: #2196f3;">) </span>
Guest

Cho mình hỏi để tạo một hộp box ngoài trang chủ để thông báo một việc gì đó. Ví dụ như: thay đổi tên miền thì nên dùng đoạn code hay plugin nào? Cảm ơn.

Nguyễn Trường <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #2196f3;">) </span>
Guest

Hiện em dùng lệnh này -webkit-line-clamp: 2; cho web nhưng khi xem bằng firefox thì lệnh này không được áp dụng, nó báo fail? Giờ sửa thế nào bác?

quynhgu <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">15</span><span style="color: #2196f3;">) </span>
Guest

id thì thay bằng dấu chấm (.) còn class thay bằng dấu thăng (#) sao nhỉ chú

Blog Duy Đàm <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">69</span><span style="color: #2196f3;">) </span>
Guest

Dạo này không thấy bạn ra bài mới. Bạn dùng gói hosting nào của bên AZDIGI vậy?

Blog Duy Đàm <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">69</span><span style="color: #2196f3;">) </span>
Guest

bạn nhiều site phết.

Blog Duy Đàm <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">69</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Blog Duy Đàm (69) (69)

Thì 3 site là nhiều rồi. Hihi

Hoàng Thám <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest

Ui cha. Mình thì mình cứ để nguyên thôi. Ý kiến riêng của mình là wordpress đã thiết kế để làm sao tiêu đề bài viết ở mức độ vừa phải giữa các ký tự cho chuẩn SEO thôi
Dù sao cũng học tập cách viết của bạn
Thanks!

Yêu Alo <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">36</span><span style="color: #2196f3;">) </span>
Guest

Công nhận trang bác tịnh load nhanh thật !

Thuần Te Tua <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">97</span><span style="color: #2196f3;">) </span>
Guest

Mới đổi sang hosting mới thấy nhanh phết đấy bác 😀

Trường Đẹpzai <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">17</span><span style="color: #2196f3;">) </span>
Guest

Ít bình loạn quá nạ, dẫy lên nào ace ê :v

Trường Đẹpzai <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">17</span><span style="color: #2196f3;">) </span>
Guest

Quào, dâm cho blog.hocban à :3 định làm chủ đề gì đó?

Trường Đẹpzai <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">17</span><span style="color: #2196f3;">) </span>
Guest

Đang làm cái dâm (theme) khác cho em nó à? :3

Phan Hùng <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">23</span><span style="color: #2196f3;">) </span>
Guest

Ơ blog bác không có reply cho cấp thứ 2 à? k thấy nút trả lời đâu

Alan Tiến <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest

Cám ơn bạn về kiến thức này. Mình đang tìm hiểu thêm về css.

Phan Hùng <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">23</span><span style="color: #2196f3;">) </span>
Guest

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 😀