Teksta dekorēšanas līnija - CSS-triki

Anonim

text-decoration-lineĪpašums grezno tekstu ar pasvītrojumu overline, line-through, vai šo līniju kombinācijas.

p ( text-decoration-line: underline; )

Vērtības

  • none: neviena rinda netiek pievienota un visas esošās rindas tiek noņemtas - piemēram, tiek nonenoņemts noklusējuma pasvītrojums saitēm.
  • underline: zem teksta pievieno 1 pikseļu pasvītrojumu.
  • overline: virs teksta pievieno 1 pikseļu pārlaidumu.
  • line-through: caur tekstu pievieno 1 pikseļu līniju.
  • inherit: manto vecāku apdari.

Vērtība blinkir norādīta W3C specifikācijā, taču tā ir novecojusi un nedarbosies nevienā pašreizējā pārlūkprogrammā. Kad tas darbojās, tas lika tekstam “mirgot”, ātri pārslēdzot to no 0% līdz 100% necaurredzamības.

Vērtību apvienošana

Jūs varat apvienot underline, overlinevai line-throughvērtības ar atstarpi atdalīts saraksta, lai pievienotu vairākas apdares rindas:

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

Lietošana

text-decoration-lineĪpašums ir praktiski identiska ar sākotnējo text-decorationīpašumu. Ja viss, ko vēlaties darīt, ir pievienot rindiņai vai rindiņām tekstu, text-decorationir labāka izvēle, jo to atbalsta visi pārlūki, pat ļoti veci. Parasti text-decoration-linedeklarācijas lietošanai ir jēga tikai tad, ja rakstāt garu roku stila kārtulu, kas ietver text-decoration-stylevai text-decoration-colordeklarāciju. Ja vēlaties izmantot visus trīs kopā, varat izmantot stenogrāfijas text-decorationīpašību.

Stenogrāfija

text-decoration-linevar izmantot kopā ar text-decoration-styleun text-decoration-colorīsumā CSS3 text-decorationrekvizītā (pašlaik to pilnībā atbalsta tikai Firefox):

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

Demonstrācija

Šī demonstrācija darbosies pārlūkprogrammās Safari, Firefox un Chrome ar iespējotām eksperimentālajām tīmekļa platformas funkcijām. blinkVērtība nav iekļauta.

Skatiet CSS-Tricks (@ css-tricks) pildspalvas teksta apdares rindiņu vietnē CodePen.

Saistīts

  • teksta noformēšana
  • teksta apdares stils
  • teksta apdare-krāsa
  • teksta apdare-izlaist

Vairāk informācijas

  • text-decoration-line W3C spec
  • text-decoration-line pie MDN

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
31 * † 7,1 * 6 ‡ Nav Nav Nav 8 *

* ar -webkitprefiksu
† ar eksperimentālu tīmekļa platformas funkciju iespējotu karodziņu
‡ 6 - 35 ar -mozprefiksu, kas nav prefiksēts no 36.