Riadok na dekoráciu textu - Triky CSS

Anonim

text-decoration-lineVlastnosť zdobia znenia s podčiarknutím, overline, line-through, alebo kombináciou týchto liniek.

p ( text-decoration-line: underline; )

Hodnoty

  • none: nepridá sa žiadny riadok a všetky existujúce riadky sa odstránia - napríklad noneodstráni predvolené podčiarknutie pri odkazoch.
  • underline: pridá pod text podčiarknutie 1px.
  • overline: nad text pridá nadpätie 1px.
  • line-through: pridá cez text 1px riadok.
  • inherit: dedí dekoráciu po rodičovi.

Hodnota blinkje v špecifikácii W3C, je však zastaraná a nebude fungovať v žiadnom aktuálnom prehliadači. Keď to fungovalo, spôsobil to, že text „blikal“ rýchlym prepínaním medzi 0% a 100% nepriehľadnosťou.

Kombinácia hodnôt

Môžete kombinovať underline, overlinealebo line-throughhodnoty v zozname priestorovo oddelené, aby sa pridať viac dekorácie riadky:

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

Využitie

Táto text-decoration-linenehnuteľnosť je prakticky totožná s pôvodnou text-decorationnehnuteľnosťou. Ak chcete do svojho textu pridať iba riadok alebo riadky, text-decorationje to lepšia voľba, pretože ho podporuje každý prehľadávač, dokonca aj veľmi starý. Všeobecne platí, že použitie text-decoration-linedeklarácie má zmysel iba vtedy, keď píšete pravidlo dlhého štýlu, ktoré obsahuje text-decoration-stylealebo text-decoration-colordeklaráciu. Ak chcete použiť všetky tri naraz, môžete použiť vlastnosť skratky text-decoration.

Skratka

text-decoration-linemôžu byť použité v kombinácii s text-decoration-stylea text-decoration-colorv skratka CSS3 text-decorationmajetku (v súčasnosti iba Firefox plne podporuje to):

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

Ukážka

Táto ukážka bude fungovať v prehliadačoch Safari, Firefox a Chrome s povolenými experimentálnymi funkciami webovej platformy. blinkHodnota nie je zahrnutá.

Prečítajte si riadok Pen text-decoration-line od CSS-Tricks (@ css-tricks) na CodePen.

Súvisiace

  • textová výzdoba
  • štýl dekorácie textu
  • textová dekorácia-farba
  • text-dekorácia-preskočiť

Viac informácií

  • text-decoration-line v špecifikácii W3C
  • text-decoration-line na MDN

Podpora prehľadávača

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

* s -webkitpredponou
† s povoleným príznakom experimentálnych funkcií webovej platformy
‡ 6 - 35 s -mozpredponou, bez predvoľby k 36.