Khi các bạn làm việc với CSS đặc biệt là làm những giao diện liên quan đến nội dung như những đoạn chữ ngắn hay dài. Đôi khi trong thiết kế chỉ hiển thị vài ba chữ làm giao diện trở nên rất đẹp, tuy nhiên khi chúng ta đưa vào dự án, nội dung có thể thay đổi dài hơn hoặc ngắn đi làm cho giao diện chúng ta gặp nhiều vấn đề không mong muốn.
Bạn muốn có những đoạn mô tả đẹp hay tiêu đề đẹp thu gọn, dưới đây là đoạn Css thu gọn nội dung theo số dòng mong muốn.
Đầu tiên bạn đặt class cho phần tử bạn muốn thu gọn nhé, ở đây mình lấy tên sản phẩm Woocommerce luôn
Chỉ cần copy đoạn code này vào Tùy Biến ➞ CSS bổ sung
.product-small .product-title a {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
}
Đoạn code trên là thu gọn 1 dòng, nếu bạn muốn thu gọn 2 hay 3 dòng thì bạn sửa số ở đây
-webkit-line-clamp: 1;
Đây là kết quả cuối cùng…
Chúc các bạn thành công!
