Tekstikaunistus-rida - CSS-trikid

Anonim

text-decoration-lineVara kaunistab teksti alla joonitud, overline rida-through, või nende kombinatsioon read.

p ( text-decoration-line: underline; )

Väärtused

  • none: rida ei lisata ja kõik olemasolevad read eemaldatakse - näiteks noneeemaldatakse linkide vaikekriips.
  • underline: lisab teksti alla 1px allajooni.
  • overline: lisab teksti kohal 1px ülerea.
  • line-through: lisab teksti kaudu 1px rea.
  • inherit: pärib vanema kaunistuse.

Väärtus blinkon W3C spetsifikatsioonis, kuid see on aegunud ja ei tööta üheski praeguses brauseris. Kui see toimis, pani see teksti vilkuma, muutes selle kiiresti läbipaistmatuse vahemikku 0–100%.

Väärtuste ühendamine

Võite kombineerida underline, overlinevõi line-throughväärtuste tühikutega eraldatult lisada mitu kaunistamiseks read:

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

Kasutamine

text-decoration-lineVara on praktiliselt identne algse text-decorationvara. Kui kõik, mida soovite teha, on lisada tekstile rida või read, text-decorationon see parem valik, sest seda toetavad kõik brauserid, isegi väga vanad. Üldiselt on text-decoration-linedeklaratsiooni kasutamine mõttekas ainult siis, kui kirjutate pikkade käte stiilireeglit, mis sisaldab deklaratsiooni text-decoration-stylevõi text-decoration-colordeklaratsiooni. Kui soovite kasutada kõiki kolme, võite kasutada lühikirjelduse text-decorationomadust.

Lühike

text-decoration-linesaab kasutada koos atribuudiga CSS3 text-decoration-styleja text-decoration-colorlühikirjas text-decoration(praegu toetab seda täielikult ainult Firefox):

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

Demo

See demo töötab Safaris, Firefoxis ja Chrome'is, kus on lubatud katselised veebiplatvormi funktsioonid. blinkVäärtus ei kuulu.

Vaadake CodePenist CSS-Tricksi (@ css-tricks) pliiatsi teksti kaunistamise rida.

Seotud

  • teksti kaunistamine
  • teksti kaunistamise stiil
  • tekst-kaunistus-värv
  • teksti kaunistamine-vahele jätmine

Rohkem informatsiooni

  • text-decoration-line W3C spetsifikatsioonis
  • text-decoration-line juures MDN

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
31 * † 7,1 * 6 ‡ Puudub Puudub Puudub 8 *

* koos -webkiteesliitega
† eksperimentaalse veebiplatvormi funktsioonidega on lubatud lipp
‡ 6 - 35 koos -mozeesliitega, eelfiksitamata alates 36.