text-decorationNieruchomość dodaje podkreślenie, overline, line-Through, lub kombinację linii do zaznaczonego tekstu.
h3 ( text-decoration: underline; )Wartości
none: żadna linia nie jest rysowana, a wszelkie istniejące dekoracje są usuwane.underline: rysuje linię o wielkości 1 piksela w poprzek tekstu na jego linii bazowej.line-through: rysuje linię o wielkości 1 piksela w poprzek tekstu w jego „środkowym” punkcie.overline: rysuje linię o wielkości 1 piksela w poprzek tekstu, bezpośrednio nad jego „górnym” punktem.inherit: dziedziczy dekorację rodzica.
blinkWartość jest w specyfikacji W3C, ale jest przestarzała i nie będzie działać w każdej bieżącej przeglądarki. Kiedy zadziałało, tekst wydawał się „mrugać”, szybko przełączając go między 0% a 100% krycia.
Próbny
Zobacz Pen CSS-Tricks: Text Decoration by CSS-Tricks (@ css-tricks) na CodePen.
Uwagi dotyczące użytkowania
Możesz łączyć wartości underline, overlinelub line-throughna liście oddzielonej spacjami, aby dodać wiele linii dekoracyjnych:
p ( text-decoration: overline underline line-through; )Domyślnie linia lub linie dziedziczą kolor tekstu ustawiony przez jego colorwłaściwość. Możesz to zmienić w przeglądarkach obsługujących tę text-decoration-colorwłaściwość lub trzywartościową skróconą właściwość.
text-decoration jako właściwość skrócona
text-decorationmoże być stosowany w połączeniu z text-decoration-stylea text-decoration-colorSkrócona forma:
.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )Obecnie tylko Firefox obsługuje to bez prefiksu. Safari obsługuje go z -webkitprefiksem. Chrome potrzebuje również -webkitprefiksu i eksperymentalnych funkcji platformy internetowej włączonych we flagach Chrome.
Związane z
text-decoration-colortext-decoration-linetext-decoration-styletext-decoration-skip
Więcej informacji
- text-decoration jako skrótowa właściwość w specyfikacji W3C CSS Moduł dekoracji tekstu Poziom 3 CR
- dekoracja tekstu w MDN
Wsparcie przeglądarki
Wszystkie przeglądarki obsługują właściwość „longhand” CSS2.1 text-decoration. Nieruchomość skrótowym i sub-properties text-decoration-color, text-decoration-linei text-decoration-stylesą obsługiwane prefiksu w Firefoksie, a wraz z -webkitprefiksem w Safari. Chrome rozpozna również te wartości z -webkitwłączonym prefiksem i flagą Experimental Web Platforms.
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 91 | 87 | Nie | 88 | TP |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14, 0-14, 4 * |
* w text-decorationpełni obsługiwane, właściwości podrzędne obsługiwane z -webkitprefiksem.
† właściwości podrzędne dodatkowo wymagają włączenia flagi eksperymentalnych funkcji platformy internetowej.
‡ text-decorationtylko CSS2.1 ; właściwości podrzędne nie są obsługiwane.