text-decoration-line
Nieruchomość ozdabia tekst z podkreśleniem, overline, line-Through, lub kombinacji tych linii.
p ( text-decoration-line: underline; )
Wartości
none
: żadna linia nie jest dodawana, a wszystkie istniejące wiersze są usuwane - na przykładnone
usuwa domyślne podkreślenie linków.underline
: dodaje podkreślenie 1 piksela pod tekstem.overline
: dodaje 1 piksel nad tekstem.line-through
: dodaje linię o rozmiarze 1 piksela przez tekst.inherit
: dziedziczy dekorację rodzica.
Wartość blink
jest zgodna ze specyfikacją W3C, ale jest przestarzała i nie będzie działać w żadnej bieżącej przeglądarce. Kiedy zadziałało, tekst wydawał się „mrugać”, szybko przełączając go między 0% a 100% krycia.
Łączenie wartości
Możesz łączyć wartości underline
, overline
lub line-through
na liście oddzielonej spacjami, aby dodać wiele linii dekoracyjnych:
p ( text-decoration-line: overline underline line-through; )
Stosowanie
text-decoration-line
Nieruchomość jest praktycznie identyczny z oryginalnym text-decoration
obiektem. Jeśli wszystko, co chcesz zrobić, to dodać linię lub linie do tekstu, text-decoration
jest to lepszy wybór, ponieważ jest obsługiwany przez każdą przeglądarkę, nawet bardzo starą. Ogólnie rzecz biorąc, użycie text-decoration-line
deklaracji ma sens tylko wtedy, gdy piszesz regułę stylu odręcznego, która zawiera text-decoration-style
lub text-decoration-color
deklarację. Jeśli chcesz użyć wszystkich trzech razem, możesz użyć shorthand text-decoration
property.
Stenografia
text-decoration-line
może być stosowany w połączeniu z text-decoration-style
a text-decoration-color
w skrótowym CSS3 text-decoration
własność (obecnie tylko Firefox w pełni obsługuje tę funkcję):
.underlined ( text-decoration: underline dotted red; )
Próbny
To demo będzie działać w Safari, Firefox i Chrome z włączonymi eksperymentalnymi funkcjami platformy internetowej. blink
Wartość nie jest wliczony w cenę.
Zobacz wiersz tekstu dekoracji pióra autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Związane z
- dekoracja tekstu
- styl dekoracji tekstu
- kolor dekoracji tekstu
- text-decoration-skip
Więcej informacji
text-decoration-line
w specyfikacji W3Ctext-decoration-line
w MDN
Wsparcie przeglądarki
Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
---|---|---|---|---|---|---|
31 * † | 7,1 * | 6 ‡ | Żaden | Żaden | Żaden | 8 * |
* z -webkit
prefiksem
† z włączoną flagą eksperymentalnych funkcji platformy internetowej
‡ 6 - 35 z -moz
prefiksem, bez prefiksu od 36.