Cách 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
Joined
Aug 30, 2019
Messages
1,288
Reaction score
9
Points
38
by Admin, 163 views.
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 (...)

1588566829545.png

Kết quả Trên firefox​
 
Top