Besedilo-dekoracija-vrstica - CSS-triki

Anonim

text-decoration-lineLastnost krasi besedilo z poudarjajo, overline, line-skozi, ali kombinacije teh vrstic.

p ( text-decoration-line: underline; )

Vrednote

  • none: nobena vrstica ni dodana in vse obstoječe vrstice so odstranjene - na primer noneodstrani privzeto podčrtaj na povezavah.
  • underline: pod besedilom doda podčrtaj 1 px.
  • overline: nad besedilom doda nadomestno črto 1 px.
  • line-through: v besedilo doda vrstico 1 pik.
  • inherit: podeduje okras starša.

Vrednost blinkje v specifikaciji W3C, vendar je zastarela in ne bo delovala v nobenem trenutnem brskalniku. Ko je delovalo, se je zdelo, da besedilo utripa s hitrim preklapljanjem med 0% in 100% motnostjo.

Združevanje vrednot

Lahko združujejo underline, overlineali line-throughvrednosti v prostorsko ločeni seznam dodati več dekoracijo linije:

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

Uporaba

text-decoration-lineLastnost je praktično enaka prvotni text-decorationpremoženja. Če vse, kar želite, je, da besedilu dodate vrstico ali vrstice, text-decorationje boljša izbira, ker jo podpira vsak brskalnik, tudi zelo star. Na splošno je uporaba text-decoration-lineizjave smiselna samo, če pišete pravilo dolgoročnega sloga, ki vključuje text-decoration-styleali text-decoration-colorizjavo. Če želite vse tri uporabiti skupaj, lahko uporabite okrajšavo text-decoration.

Stenografija

text-decoration-linese lahko uporablja v kombinaciji z lastnostjo CSS3 text-decoration-stylein text-decoration-colorv njej text-decoration(to trenutno podpira samo Firefox):

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

Demo

Ta predstavitev bo delovala v brskalnikih Safari, Firefox in Chrome z omogočenimi poskusnimi funkcijami spletne platforme. blinkVrednost ni vključen.

Oglejte si besedilno okrasno vrstico pisala CSS-Tricks (@ css-tricks) na CodePen.

Sorodno

  • okrasitev besedila
  • Besedilo-dekoracija-slog
  • besedilo-dekoracija-barva
  • besedilo-dekoracija-preskoči

Več informacij

  • text-decoration-line v specifikaciji W3C
  • text-decoration-line na MDN

Podpora za brskalnik

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

* s -webkitpredpono
† z omogočeno zastavico funkcij eksperimentalne spletne platforme
‡ 6 - 35 s -mozpredpono, brez predpone od 36.