Use css line clamp
Trước đây khi muốn hiển thị văn bản dạng dấu chấm lửng [văn bản…] thì chỉ sử dụng cho đoạn văn bản có 1 dòng.
Nếu muốn hiển thị đoạn văn bản có nhiều dòng thì cần sử dụng kẹp dòng
Cách sử dụng.
______7
Nguồn. https. // thủ thuật css. com/line-clampin/
Các trình duyệt được sử dụng. https. // caniuse. com/?search=line-clamp
Phần mô tả ngắn là phần được mình đóng khung màu đỏ, bạn thấy đó, nó có chiều dài nên với cái hình bên trái. Vì sao phải 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
Và đây là mã để 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; . Nếu bạn muốn 3 dòng thì edit number 2 to number 3 ĐỒNG THỜI CÓ THỂ CHỈNH SỬA LẠI max-height, line-height sao cho trình duyệt hiển thị đẹp nhất. Lưu ý value 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 . ]
Kết quả Trên firefox
Chúc các nick thành công. ]
Giả sử ban đầu ta có CSS
p { border: 1px solid #cc0000; overflow: hidden; white-space: nowrap; width: 200px; }
Show the browser when no text-overflow
Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn
Thêm thuộc tính tràn văn bản, CSS viết
p { border: 1px solid #cc0000; overflow: hidden; text-overflow: clip; white-space: nowrap; width: 200px; }
Hiển thị trình duyệt khi có tràn văn bản
Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn
Thuộc tính tràn văn bản với giá trị dấu chấm lửng
Thuộc tính tràn văn bản với giá trị dấu chấm lửng. Cắt đoạn văn bản và thay thế bằng dấu 3 chấm
Thêm thuộc tính tràn văn bản với giá trị dấu chấm lửng, CSS viết
p { border: 1px solid #cc0000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 200px; }
Hiển thị trình duyệt khi có tràn văn bản
Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn
Thuộc tính text-overflow with value string
Thuộc tính text-overflow with value string. Cắt một đoạn văn bản và thay thế bằng một chuỗi khác
Thêm thuộc tính tràn văn bản với chuỗi giá trị, CSS viết
p { border: 1px solid #cc0000; overflow: hidden; text-overflow: '...v.v...'; white-space: nowrap; width: 200px; }
Hiển thị trình duyệt khi có tràn văn bản
Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn
Thuộc tính tràn văn bản được sử dụng kèm theo. bay lượn
Thuộc tính tràn văn bản được sử dụng kèm theo. hover, hover, control value hover, normal used to display full text for user
Add the selector. di chuột, viết CSS
p { border: 1px solid #cc0000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 200px; } p:hover { overflow: visible; white-space: pre-line; width: 500px; }
Hiển thị trình duyệt khi có tràn văn bản
Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn
Đã đăng vào ngày 12 tháng 19 năm 2019 8. 16 SA 2 phút đọc
Thêm dấu ba chấm cho đoạn văn bản nhiều dòng
Thông thường, để thêm dấu. when content too long, ta thường để tràn. ẩn, khoảng trắng. nowrap same with text-overflow. dấu chấm lửng. Tuy nhiên, cách này chỉ có tác dụng làm 1 dòng văn bản thêm dấu ba chấm mà thôi. Nó sẽ không làm được như thế này
Vì vậy sau đây mình sẽ giới thiệu một vài cách giải quyết
Sử 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 phần tử có hiển thị là hộp. Sau đây là danh sách các trình duyệt được hỗ trợ
Cách sử dụng rất đơn giản, cho đoạn văn bản thuộc tính sau
.three-line-paragraph {
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 */
}
Thử nghiệm
Use dotdotdot thư viện
Nếu bạn không cảm thấy trong việc sử dụng js để giải quyết, bạn có thể sử dụng thư viện dotdotdot tại https. //github. com/FrDH/dotdotdot-js. Thư viện này nhẹ, dễ sử dụng và trên hết, nó hỗ trợ đầy đủ các trình duyệt cũ [với phiên bản dotdotdot jQuery, hoặc bản dotdotdot es5 với polyfill]. Đây cũng là phương pháp mình hay sử dụng
Passive cach
Cách này chỉ để vui thôi
Ta sẽ xử lý đoạn văn bản này phía server [hoặc javascript cũng được]Giả sử nhé, đoạn văn bản dài 4 dòng sẽ chứa từ 80-100 ký tự, 101 ký tự sang dòng 5 [Tùy giao diện], bạn hãy giới hạn đoạn nội dung đoạn chỉ chứa tầm 90 ký tự rồi thêm chuỗi dấu. is beingCách này có tác dụng khi khách hàng không để ý hoặc không kiểm tra trên các màn hình khác nhau nhé]]Tổng kết
Nhìn chung thì việc thêm dấu ba chấm theo số dòng văn bản khá là khó nhằn nếu không có bản cập nhật mới nhất của Css3 hay những thư viện hỗ trợ khác [Thực ra tự viết cũng được mà mất thời gian chết lên được]