Hướng dẫn dấu 3 chấm css
Show Thuộc tính text-overflow với giá trị clipThuộ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ị ellipsisThuộ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ỗiThuộ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 :hoverThuộ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òngThô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: Demo Dùng thư viện dotdotdotNế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 https://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ộiCách này chỉ để cho vui thôi Tổng kếtNhì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 |
