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

Tài liệu thiết kế website / Không có bình luận ở Giới hạn số dòng cho đoạn văn bản bằng CSS

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.

Thẻ: ,

Lại Đình Cường

Tôi làm quen và phát triển WordPress từ năm 2008, cho đến nay thì đã có hơn 13 năm kinh nghiệm, thật không thể tin được. Tôi có đam mê và dành nhiều thời gian làm việc với WordPress mỗi ngày, hiện tại tôi đang phát triển giao diện và plugin cho WordPress.

Nếu bạn đang cần người làm trang web bằng WordPress? Hãy liên hệ với tôi ngay để được tư vấn nhé.