Hướng dẫn text trong css
- Chức năng của nhóm thuộc tính text-decoration là dùng để thiết lập một cái đường kẻ lên văn bản. Show - Nhóm thuộc tính text-decoration được chia ra làm ba thuộc tính chính:
1) Thuộc tính text-decoration-line- Thuộc tính text-decoration-line dùng để chỉ định vị trí của cái đường kẻ. - Cú pháp:
- Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:
2) Thuộc tính text-decoration-style- Thuộc tính text-decoration-style dùng để xác định kiểu của cái đường kẻ. - Cú pháp:
- Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:
3) Thuộc tính text-decoration-color- Thuộc tính text-decoration-color dùng để xác định màu sắc của cái đường kẻ.
Xem ví dụ 4) Thuộc tính text-decoration- Thuộc tính text-decoration là cú pháp tổng quát dùng để thiết lập một cái đường kẻ lên văn bản (thay vì phải sử dụng kết hợp ba thuộc tính text-decoration-line, text-decoration-style, text-decoration-color được nêu ở trên thì bây giờ chúng ta chỉ cần sử dụng mỗi thuộc tính này là đủ) - Cú pháp:
- Trong đó, line color style lần lượt là giá trị của ba thuộc tính text-decoration-line text-decoration-color text-decoration-style - Tuy nhiên, thuộc tính text-decoration không bắt buộc chúng ta phải gán cho nó đủ ba tham số, những tham số của thuộc tính nào còn thiếu thì trình duyệt sẽ tự động sử dụng giá trị mặc định của thuộc tính tương ứng.
Xem ví dụ Đã đăng vào thg 9 11, 2020 8:09 SA 4 phút đọc Chào các bạn! Đã bao giờ các bạn đau đầu trong việc xử lý text dài ngắn hay không? Chẳng hạn có một số trường hợp như thế này:
Thực ra đây cũng là vấn đề của rất nhiều người. Bản thân mình khi chưa có kinh nghiệm về mấy cái này thì thường hay lạm dụng jquery để check các case. Tuy nhiên sau khi phát hiện ra 1 số thuộc tính với cách sử dụng vô cùng đơn giản thì mình đã quăng jquery ra sau đầu ngay và luôn. Bây giờ cùng đi vào bài viết nhé. 1. Text OverflowThuộc tính text-overflow dùng để xử lý một đoạn text bị tràn ra ngoài phần tử chứa nó bằng cách cắt bớt đoạn tràn hoặc hiển thị dưới dạng dấu chấm lửng "..." để làm dấu hiệu cho người dùng. Hai giá trị thường dùng nhất là:
Ngoài ra còn có 2 giá trị khác:
Kết quả hiển thị sẽ như thế này: Vậy để xem lại đoạn text đầy đủ thì làm như thế nào?
3. Word BreakWord-wrap xác định có xuống dòng hay không, còn thuộc tính work-break xác định kiểu xuống dòng. Các giá trị thường thấy là:
4. Writing ModeThuộc tính writing-mode sử dụng để định kiểu cho đoạn text được đặt theo chiều ngang hay chiều dọc. Các giá trị của writing-mode:
Kết quả hiển thị như sau: Như vậy qua bài viết bài của mình, có lẽ các bạn cũng đã hiểu được sơ sơ cách xử lý text sao cho đẹp, đơn giản và nhanh chóng rồi nhỉ. Chúc các bạn thành công! All rights reserved |