CSS giới hạn số dòng văn bản hiển thị trên trình duyệt sử dụng CSS

Admin

Administrator
Staff member
Bài viết
2,755
Điểm tương tác
3
Gold
43G
Ví Bảo Hiểm
0$
bởi Admin 75 lượt xem.
Trong website của bạn, sẽ có những danh sách các bài viết, danh sách các sản phẩm cùng mô tả ngắn của danh sách đó. Để rõ ràng hơn bạn xem hình bên dưới

Phần mô tả ngắn là phần được mình đóng khung màu đỏ, bạn thấy đó, nó có dài so với cái hình bên trái. Vậy làm sao để giới hạn lại số dòng hiển thị đó bằng css và phải xem được trên tất cả các trình duyệt chứ không phải chỉ giới hạn được trên Google Chrome như một số bài hướng dẫn mình tình cờ xem được trên mạng

Và đây là code để giới hạn số dòng đó
CSS:
display: -webkit-box;
max-height: 3.2rem;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 2;
line-height: 1.6rem;
-webkit-line-clamp: 2; là số dòng bạn muốn hiẻn thị. Nếu bạn muốn 3 dòng thì sửa số 2 thành số 3 đồng thời có thể chỉnh lại max-height, line-height sao cho trình duyệt hiển thị đẹp nhất. Lưu ý giá trị max-height >= 2 lần line-height

Và đây là kết quả, ở đây mình cho giới hạn 2 dòng và sau khi giới hạn cuối đoạn mô tả ngắn sẽ có dấu ba chấm (...)
Bạn phải Đăng Nhập / Đăng Ký để xem hình ảnh đính kèm.

(ảnh minh hoạ)​
 

Thống kê diễn đàn

Chủ đề
4,556
Bài viết
4,559
Thành viên
224
Thành viên mới nhất
ewill
Bên trên