Published Aug 24th, 2017 12:02 p.m. 1 min read
Để giới hạn số kí tự trong một đoạn văn bản, chúng ta thường xử lý bằng các ngôn ngữ lập trình phía Server hoặc dùng Javascript phía Client. Trong bài viết này mình giới thiệu tới các bạn một cách khác, đó là sử dụng thuộc tính text-overflow
trong CSS.
Cú pháp dùng để cắt chuỗi trên 1 dòng:
p {
width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Giải thích code một chút:
white-space: nowrap
: Ngăn k cho đoạn văn bản xuống dòngoverflow: hidden
: Ẩn đoạn text bị thừatext-overflow: ellipsis
: Cắt một đoạn text và thay thế bằng dấu ... Kết quả
Cú pháp dùng để cắt chuỗi trên nhiều dòng:
p {
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 25px;
-webkit-line-clamp: 3;
height: 75px;
display: -webkit-box;
-webkit-box-orient: vertical;
}
line-height: 25px
: Set line-height cho đoạn văn bản-webkit-line-clamp:3
: Số dòng text hiển thịheight: 75px
: Set chiều cao cho đoạn văn bản.height = line-height * line-clamp
Kết quả
Mong rằng bài viết này có ích cho các bạn !
All Rights Reserved
- 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