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, tieknone
noņ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 blink
ir 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
, overline
vai line-through
vē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-decoration
ir labāka izvēle, jo to atbalsta visi pārlūki, pat ļoti veci. Parasti text-decoration-line
deklarācijas lietošanai ir jēga tikai tad, ja rakstāt garu roku stila kārtulu, kas ietver text-decoration-style
vai text-decoration-color
deklarāciju. Ja vēlaties izmantot visus trīs kopā, varat izmantot stenogrāfijas text-decoration
īpašību.
Stenogrāfija
text-decoration-line
var izmantot kopā ar text-decoration-style
un text-decoration-color
īsumā CSS3 text-decoration
rekvizī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. blink
Vē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 spectext-decoration-line
pie MDN
Pārlūka atbalsts
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
31 * † | 7,1 * | 6 ‡ | Nav | Nav | Nav | 8 * |
* ar -webkit
prefiksu
† ar eksperimentālu tīmekļa platformas funkciju iespējotu karodziņu
‡ 6 - 35 ar -moz
prefiksu, kas nav prefiksēts no 36.