- Trang chủ
- Tham khảo
- CSS
- CSS3
- Ví dụ về thuộc tính text-overflow
Thuộc tính text-overflow với giá trị clip
Thuộc tính text-overflow với giá trị clip xén bớt vùng text.
HTML viết:
Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow
Giả sử ban đầu ta có CSS:
p { border: 1px solid #cc0000; overflow: hidden; white-space: nowrap; width: 200px; }
Hiển thị trình duyệt khi chưa có text-overflow:
Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow
Thêm thuộc tính text-overflow, 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ó text-overflow:
Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow
Thuộc tính text-overflow với giá trị ellipsis
Thuộc tính text-overflow với giá trị ellipsis: Cắt một đoạn text và thay thế bằng dấu 3 chấm.
Thêm thuộc tính text-overflow với giá trị ellipsis, 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ó text-overflow:
Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow
Thuộc tính text-overflow với giá trị chuỗi
Thuộc tính text-overflow với giá trị chuỗi: Cắt một đoạn text và thay bằng một chuỗi khác.
Thêm thuộc tính text-overflow với giá trị chuỗi, 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ó text-overflow:
Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow
Thuộc tính text-overflow sử dụng kèm với :hover
Thuộc tính text-overflow sử dụng kèm với :hover, điều khiển giá trị hover, thường dùng để hiển thị full text cho người dùng.
Thêm bộ chọn :hover, CSS viết:
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ó text-overflow:
Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow
Đã đăng vào thg 12 19, 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 ... 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 sau đây mình sẽ giới thiệu một vài cách giải quyết.
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ợ
Cách sử dụng rất đơn giản, cho đoạn văn bản những 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 */
}
Demo
Dùng thư viện dotdotdot
Nếu bạn không cảm thấy trong việc dùng js để giải quyết, bạn có thể dùng thư viện dotdotdot tại //github.com/FrDH/dotdotdot-js. Thư viện này nhẹ, dễ dùng, và trên hết, nó hỗ trợ được đầ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.
Cách lầy lội
Cách này chỉ để cho vui thôi
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ó những cập nhật mới 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]
All rights reserved