Bạn có một cái title nhưng nó quá dài và bạn muốn giơi hạn nó trong 2 dòng với dấu ba chấm như thế này
Có nhiều cách để làm được điều này. Các bạn có thể sử dụng CSS hoặc JS để thực hiện. Theo mình, cách dễ thực hiện nhất là sử dụng CSS line-clamp. Snippet cơ bản sẽ như thế này:
.card-text {
display: -webkit-box;
-webkit-line-clamp: 2; //số dòng bạn mong muốn
-webkit-box-orient: vertical;
overflow: hidden;
}Mục lục
Line-clamp cho IE?
Rất tiếc, CSS property này không được hỗ trợ trên IE, nếu bạn cần sử dụng line-clamp trên IE, sử dụng JS sẽ là một giải pháp tốt dánh cho bạn, ví dụ mình để ở codepen phía dưới
See the Pen line-clamp by minhchau (@ngocminhxx) on CodePen.
Cột bên trái mình dùng CSS only, cột bên phải mình dùng JS only. Kết quả vẫn giống nhau. Nếu bạn cần dùng JS, bạn phải include JS này vào
https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.js
Line-clamp support browsers
