Text-decor-linie - CSS-Tricks

Anonim

text-decoration-lineProprietatea decorează text cu o subliniere, overline, Tăiat sau o combinație a acestor linii.

p ( text-decoration-line: underline; )

Valori

  • none: nu se adaugă nicio linie și toate liniile existente sunt eliminate - de exemplu, noneelimină sublinierea implicită a linkurilor.
  • underline: adaugă o subliniere de 1 px sub text.
  • overline: adaugă o linie de 1px deasupra textului.
  • line-through: adaugă o linie de 1 px prin text.
  • inherit: moștenește decorul părintelui.

Valoarea blinkeste în specificația W3C, dar este depreciată și nu va funcționa în niciun browser curent. Când a funcționat, a făcut ca textul să pară „clipi”, trecând rapid între 0% și 100% opacitate.

Combinarea valorilor

Puteți combina underline, overlinesau line-throughvalorile dintr - o listă separată cu spațiu pentru a adăuga mai multe linii de decor:

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

Utilizare

text-decoration-lineProprietatea este practic identic cu originalul text-decorationproprietate. Dacă tot ce doriți să faceți este să adăugați o linie sau linii textului dvs., text-decorationeste o alegere mai bună, deoarece este acceptată de fiecare browser, chiar și de cele foarte vechi. În general, utilizarea unei text-decoration-linedeclarații are sens numai atunci când scrieți o regulă de stil de mână care include text-decoration-stylesau o text-decoration-colordeclarație. Dacă doriți să utilizați toate cele trei împreună, puteți utiliza text-decorationproprietatea de prescurtare .

Stenografie

text-decoration-linepoate fi utilizat în combinație cu text-decoration-styleși text-decoration-colorîn stenograma CSS3 text-decoration(în prezent numai Firefox acceptă acest lucru pe deplin):

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

Demo

Această demonstrație va funcționa în Safari, Firefox și Chrome, cu funcțiile experimentale ale platformei web activate. blinkValoarea nu este inclusă.

Vedeți linia de decorare a textului Pen de la CSS-Tricks (@ css-tricks) pe CodePen.

Legate de

  • decor-text
  • text-decor-stil
  • text-decor-culoare
  • text-decorare-săritură

Mai multe informatii

  • text-decoration-line în specificația W3C
  • text-decoration-line la MDN

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
31 * † 7.1 * 6 ‡ Nici unul Nici unul Nici unul 8 *

* cu -webkitprefix
† cu platformă Web experimentală cu semnalizator activat
‡ 6 - 35 cu -mozprefix, fără prefix din 36.