Video học lập trình mỗi ngày

Text-overflow trong css. Có lúc nào bạn như tôi đi tìm giải pháp cho giới hạn số dòng text với css. Thật ra không cần sử dụng Text-overflow, tôi cũng như các bạn, việc hiển thị (...) trong css, nó tương đối dễ, nhưng việc sử dụng ít nên không bao giờ nhớ được.



Sáng nay làm lại giao diện cho một web app thì cần phải sử dụng tính năng css giới hạn text này. Nhưng nó không phải là giới hạn một dòng text với css. Mà là nhiều dòng. Các bạn chú ý đấy dấu ba chấm css (...) nó khác với "Three dots in ES6" nên đừng lầm tưởng đến mức cơ bản đấy.

Giới hạn số dòng text với css

Sau khi đi dạo quang google tìm giải pháp nào cho Multiple Line Ellipsis. Sử dụng text-overflow: ellipsis; Và cuối cùng cũng đã tìm thấy cho dấu ba chấm trong css với nhiều dòng .

Sử dụng text-overflow: ellipsis;

Ví dụ : HTML

Add code css này

CSS

.parent {
 width: 300px;
}

.ellipsis {
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

.block-ellipsis {
 display: block;
 display: -webkit-box;
 max-width: 100%;
 height: 43px;
 margin: 0 auto;
 font-size: 14px;
 line-height: 1;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 text-overflow: ellipsis;
}

Show 

Bạn có thể xem demo tại đây : codepen.io