Chắc chắn rồi! Để rút gọn tiêu đề (hoặc bất kỳ đoạn văn bản nào) thành 2 hàng và hiển thị dấu “…” ở cuối, bạn có thể sử dụng đoạn mã CSS sau.
Đây là phương pháp hiện đại và được hỗ trợ tốt trên hầu hết các trình duyệt.
Css rút gọn tiêu đề thành 2 hàng
Đoạn mã CSS
.tieu-de-cua-ban {
display: -webkit-box;
-webkit-line-clamp: 2; /* Số dòng tối đa bạn muốn hiển thị */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Giải thích và cách áp dụng
.tieu-de-cua-ban: Đây là bộ chọn (selector). Bạn cần thay thế nó bằng class CSS của tiêu đề sản phẩm trên trang của bạn.- Ví dụ: Trên theme Flatsome, tiêu đề sản phẩm thường có class là
.name.product-title a. Vậy bạn sẽ viết là:.name.product-title a { ... }
- Ví dụ: Trên theme Flatsome, tiêu đề sản phẩm thường có class là
display: -webkit-box;: Bật chế độ hiển thị đặc biệt để có thể giới hạn số dòng.-webkit-line-clamp: 2;: Đây là dòng quan trọng nhất. Số2ở đây chính là số dòng tối đa sẽ được hiển thị. Bạn có thể thay đổi thành3,4… tùy ý.-webkit-box-orient: vertical;: Thiết lập hướng cho box.overflow: hidden;: Ẩn đi phần văn bản bị thừa ra ngoài.
Ví dụ cụ thể cho tiêu đề sản phẩm của Flatsome:
/* Rút gọn tiêu đề sản phẩm của Flatsome thành 2 dòng */
.name.product-title a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Thêm chiều cao để đảm bảo các box bằng nhau */
height: 3.2em; /* Tùy chỉnh con số này nếu cần */
}
Bạn chỉ cần dán đoạn mã trên vào là được. Chúc bạn thành công!
