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

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

Danh sách bài viết

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 đó

 
                            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 (...)

Kết quả Trên firefox

Chúc các bợn thành công :)