Bạn cần giới hạn số ký tự hay số dòng trong đoạn văn bản để website đẹp và chuyên nghiệp hơn. Để làm điều này bạn có thể dùng thuộc tính text-overflow trong CSS.
Giới hạn trên 1 dòng:
p { width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Trong đoạn code trên thì:
white-space: nowrap: Không cho đoạn văn bản xuống dòng
overflow: hidden: Ẩn đoạn text bị thừa
text-overflow: ellipsis: Cắt một đoạn text và thay thế bằng dấu ...
Giới hạn trên nhiều dòng
p { width: 300px; overflow: hidden; text-overflow: ellipsis; line-height: 20px; -webkit-line-clamp: 5; display: -webkit-box; -webkit-box-orient: vertical; }
Trên các trình duyệt hỗ trợ webkit như: Chrome, Edge,Safari,.. bạn có thể dùng thuộc tính -webkit-line-clamp để giới hạn số dòng hiển thị.
Chúc các bạn thành công. Nếu có thắc mắc hay đóng góp gì các bạn hãy comment bên dưới nhé.
Để lại bình luận
Bạn phải đăng nhập để gửi phản hồi.