Các text-decoration-linetài sản trang trí văn bản với một gạch dưới, overline, line-qua, hoặc một sự kết hợp của những dòng.
p ( text-decoration-line: underline; )Giá trị
none: không có dòng nào được thêm vào và mọi dòng hiện có đều bị xóa - ví dụ:nonexóa gạch dưới mặc định trên các liên kết.underline: thêm gạch chân 1px bên dưới văn bản.overline: thêm đường gạch ngang 1px phía trên văn bản.line-through: thêm một dòng 1px qua văn bản.inherit: kế thừa cách trang trí của cha mẹ.
Giá trị blinknằm trong thông số W3C, nhưng nó không được dùng nữa và sẽ không hoạt động trong bất kỳ trình duyệt hiện tại nào. Khi nó hoạt động, nó làm cho văn bản có vẻ "nhấp nháy" bằng cách nhanh chóng chuyển đổi nó từ 0% đến 100% độ mờ.
Kết hợp các giá trị
Bạn có thể kết hợp underline, overlinehoặc line-throughgiá trị trong một danh sách không gian tách ra để thêm nhiều dòng trang trí:
p ( text-decoration-line: overline underline line-through; )Sử dụng
Tài text-decoration-linesản thực tế giống với text-decorationtài sản ban đầu . Nếu tất cả những gì bạn muốn làm là thêm một dòng hoặc các dòng vào văn bản của mình, đây text-decorationlà lựa chọn tốt hơn vì nó được hỗ trợ bởi mọi trình duyệt, ngay cả những trình duyệt rất cũ. Nói chung, việc sử dụng một text-decoration-linekhai báo chỉ có ý nghĩa khi bạn đang viết một quy tắc kiểu viết tay bao gồm text-decoration-stylehoặc một text-decoration-colorkhai báo. Nếu bạn muốn sử dụng cả ba cùng nhau, bạn có thể sử dụng thuộc tính tốc ký text-decoration.
Tốc ký
text-decoration-linecó thể được sử dụng kết hợp với text-decoration-stylevà text-decoration-colortrong thuộc tính CSS3 viết tắt text-decoration(hiện chỉ có Firefox hỗ trợ đầy đủ điều này):
.underlined ( text-decoration: underline dotted red; )Bản giới thiệu
Bản trình diễn này sẽ hoạt động trong Safari, Firefox và Chrome với các tính năng nền tảng web thử nghiệm được bật. Các blinkgiá trị không được bao gồm.
Xem dòng trang trí văn bản Pen của CSS-Tricks (@ css-trick) trên CodePen.
Có liên quan
- trang trí văn bản
- văn bản-trang trí-phong cách
- văn bản-trang trí-màu sắc
- văn bản-trang trí-bỏ qua
Thêm thông tin
text-decoration-linetrong thông số kỹ thuật W3Ctext-decoration-linetại MDN
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * † | 7.1 * | 6 ‡ | không ai | không ai | không ai | số 8 * |
* với -webkittiền tố
† với cờ các tính năng Nền tảng web thử nghiệm được bật
‡ 6 - 35 với -moztiền tố, chưa có tiền tố là 36.