Text-decoration-line - CSS-Tricks

Anonim

text-decoration-lineNieruchomość 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ład noneusuwa 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ść blinkjest 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, overlinelub line-throughna liście oddzielonej spacjami, aby dodać wiele linii dekoracyjnych:

p ( text-decoration-line: overline underline line-through; )

Stosowanie

text-decoration-lineNieruchomość jest praktycznie identyczny z oryginalnym text-decorationobiektem. Jeśli wszystko, co chcesz zrobić, to dodać linię lub linie do tekstu, text-decorationjest 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-linedeklaracji ma sens tylko wtedy, gdy piszesz regułę stylu odręcznego, która zawiera text-decoration-stylelub text-decoration-colordeklarację. Jeśli chcesz użyć wszystkich trzech razem, możesz użyć shorthand text-decorationproperty.

Stenografia

text-decoration-linemoże być stosowany w połączeniu z text-decoration-stylea text-decoration-colorw skrótowym CSS3 text-decorationwł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. blinkWartość 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 W3C
  • text-decoration-line w MDN

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
31 * † 7,1 * 6 ‡ Żaden Żaden Żaden 8 *

* z -webkitprefiksem
† z włączoną flagą eksperymentalnych funkcji platformy internetowej
‡ 6 - 35 z -mozprefiksem, bez prefiksu od 36.