Tên sản phẩm hoặc bài viết đôi khi khá dài, không đều dẫn tới bố cục trang web nhấp nhô, trông không được đẹp mắt. Để khắc phục tình trang này có nhiều cách nhưng TuongAds chia sẻ bạn sử dụng CSS bổ sung dưới đây cũng rất hiệu quả.
Ví dụ với tiêu đề sản phẩm WooCommerce
| 1 2 3 4 5 6 7 8 9 10 | p.name.product-title a { padding-top: 5px; text-align: center; color: #000; font-weight: 900; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; |
Giải thích một chút:
- Dán đoạn code CSS này vào CSS bổ sung của theme/child theme đang kích hoạt.
- p.name.product-title a là class của tiêu đề sản phẩm trên web của mình (có thể thay nó bằng tiêu đề bài viết)
- -webkit-line-clamp: 2; là số dòng các bạn muốn cắt, nếu chỉ muốn cắt thành 1 dòng thì thay bằng số 1.
Chúc các bạn thành công!
Gọi TuongAds
Chat Zalo
Bài viết cùng chủ đề:
Bài viết cùng chuyên mục: