text-decoration-line
Vlastnosť 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íkladnone
odstrá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 blink
je 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
, overline
alebo line-through
hodnoty 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-line
nehnuteľnosť je prakticky totožná s pôvodnou text-decoration
nehnuteľnosťou. Ak chcete do svojho textu pridať iba riadok alebo riadky, text-decoration
je 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-line
deklarácie má zmysel iba vtedy, keď píšete pravidlo dlhého štýlu, ktoré obsahuje text-decoration-style
alebo text-decoration-color
deklaráciu. Ak chcete použiť všetky tri naraz, môžete použiť vlastnosť skratky text-decoration
.
Skratka
text-decoration-line
môžu byť použité v kombinácii s text-decoration-style
a text-decoration-color
v skratka CSS3 text-decoration
majetku (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. blink
Hodnota 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 W3Ctext-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 -webkit
predponou
† s povoleným príznakom experimentálnych funkcií webovej platformy
‡ 6 - 35 s -moz
predponou, bez predvoľby k 36.