Hướng dẫn css rút gọn text
|
Show 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 Cú pháp dùng để cắt chuỗi trên 1 dòng: Giải thích code một chút:
Cú pháp dùng để cắt chuỗi trên nhiều dòng:
Mong rằng bài viết này có ích cho các bạn ! All Rights Reserved
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 |
