Giới hạn số dòng cho đoạn văn bản bằng CSS

Lại Đình Cường

Tài liệu thiết kế website

Bằng cách sử dụng thuộc tính -webkit-line-clamp bạn hoàn toàn có thể giới hạn số dòng cho đoạn văn bản.

p {
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color: #a5a5a5;
}

Hoặc bạn cũng có thể sử dụng theo cách truyền thống là giới hạn độ cao bởi thuộc tính height và cho overflow là hidden. Tuy nhiên, cách này sẽ không hiệu quả khi làm responsive.

Nếu viết trên code PHP với WordPress, bạn có thể sử dụng hàm wp_trim_words để cắt chính xác số lượng từ cần lấy. Nhưng cách này cũng có hạn chế là khi thẻ chứa có độ rộng lớn thì nó chỉ hiển thị trên 1 dòng.

0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất