Teksto dekoravimo eilutė - CSS-gudrybės

Anonim

text-decoration-lineNuosavybė puošia tekstą pabraukimo, overline, line-through, ar šių eilučių derinys.

p ( text-decoration-line: underline; )

Vertybės

  • none: eilutė nepridėta ir visos esamos eilutės pašalinamos - pavyzdžiui, nonepašalinamas numatytasis nuorodų pabraukimas.
  • underline: po tekstu prideda 1 taško pabraukimą.
  • overline: virš teksto prideda 1 taško viršelį.
  • line-through: prideda 1px eilutę per tekstą.
  • inherit: paveldi tėvo puošmeną.

Vertė blinkyra W3C specifikacijoje, tačiau ji nebenaudojama ir neveiks jokioje dabartinėje naršyklėje. Kai jis suveikė, tekstas atrodė „mirksintis“, greitai perjungdamas jį nuo 0% iki 100% neskaidrumo.

Vertybių derinimas

Galite derinti underline, overlinear line-throughreikšmes Tarpais atskirtų sąrašo pridėti keli apdailos eilutes:

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

Naudojimas

text-decoration-lineNuosavybė yra praktiškai identiškas originalaus text-decorationobjekto. Jei viskas, ką norite padaryti, tai pridėti eilutę ar eilutes prie savo teksto, text-decorationyra geresnis pasirinkimas, nes ją palaiko kiekviena naršyklė, net ir labai sena. Paprastai text-decoration-linedeklaraciją naudoti yra prasminga tik tada, kai rašote ilgų rankų stiliaus taisyklę, kuri apima text-decoration-stylearba text-decoration-colordeklaraciją. Jei norite naudoti visas tris kartu, galite naudoti „stenografijos“ text-decorationypatybę.

Stenografija

text-decoration-linegali būti naudojamas kartu su ypatybėmis CSS3 text-decoration-styleir text-decoration-colorsutrumpintai text-decoration(šiuo metu tai visiškai palaiko tik „Firefox“):

.underlined ( text-decoration: underline dotted red; )

Demonstracija

Ši demonstracinė versija veiks „Safari“, „Firefox“ ir „Chrome“ su įgalintomis eksperimentinėmis žiniatinklio platformos funkcijomis. blinkVertė nėra įtraukta.

„CodePen“ žiūrėkite CSS-Tricks (@ css-tricks) „Pen“ teksto dekoravimo eilutę.

Susijęs

  • teksto dekoravimas
  • teksto dekoravimo stiliaus
  • tekstas-dekoravimas-spalva
  • teksto dekoravimas-praleidimas

Daugiau informacijos

  • text-decoration-line W3C specifikacijoje
  • text-decoration-line MDN

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
31 * † 7,1 * 6 ‡ Nė vienas Nė vienas Nė vienas 8 *

* su -webkitpriešdėliu
† su eksperimentine žiniatinklio platformos funkcijomis įgalinta vėliava
‡ 6–35 su -mozpriešdėliu, nenurodyta nuo 36.