Thêm dấu … cho đoạn nội dung văn bản nhiều chữ & nhiều dòng

Thông thường, để thêm dấu … khi nội dung quá dài, ta thường để overflow: hidden, white-space: nowrap cùng với text-overflow: ellipsis. Tuy nhiên, cách này chỉ có tác dụng làm 1 dòng text thêm dấu ba chấm mà thôi. Nó sẽ không làm được như thế này

Vậy cách xử lý đơn giản nhất sẽ là như nào, mình sẽ làm cách này nhé:

Dùng thuộc tính -webkit-line-clamp

Đây là một thuộc tính CSS3, chỉ sử dụng được cho các element có display là box. Sau đây là danh sách các trình duyệt được hỗ trợ

.noi-dung-can-rut-ngan {
    display: block; /* Fallback trong trường hợp trình duyệt không hỗ trợ display dạng box */
    display: -webkit-box;
    line-height: 16px; /* Fallback  */
    max-height: 74px; /* Fallback số dòng bạn muốn giới hạn */
    -webkit-line-clamp: 3; /* Số dòng bạn muốn giới hạn */
    visibility: visible; /* Tránh bug không giới hạn số dòng được do trình duyệt */
    text-overflow: ellipsis;
    overflow:hidden;
    max-width: 300px; /* Mình giới hạn độ dài paragraph để nó xuống dòng phục vụ demo thôi */
}