Tekstikoristelu-rivi - CSS-temppuja

Anonim

text-decoration-lineOminaisuus koristaa tekstin alleviivaus, overline, linja-kautta, tai niiden yhdistelmästä linjat.

p ( text-decoration-line: underline; )

Arvot

  • none: yhtään riviä ei lisätä, ja kaikki olemassa olevat rivit poistetaan - esimerkiksi nonepoistetaan linkkien oletusviiva.
  • underline: lisää 1px-alleviivauksen tekstin alle.
  • overline: lisää 1px-viivan tekstin yläpuolelle.
  • line-through: lisää 1px-rivin tekstin läpi.
  • inherit: perii vanhemman koristelun.

Arvo blinkon W3C-määrityksessä, mutta se on vanhentunut eikä toimi missään nykyisessä selaimessa. Kun se toimi, se sai tekstin näyttämään "vilkkuvalta" vaihtamalla sen nopeasti 0%: n ja 100%: n peittävyyden välillä.

Arvojen yhdistäminen

Voit yhdistää underline, overlinetai line-througharvoja eroteltuja lista lisätä useita koristeluun rivit:

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

Käyttö

text-decoration-lineOmaisuus on käytännössä identtinen alkuperäisen text-decorationomaisuutta. Jos haluat vain lisätä rivin tai viivat tekstiin, text-decorationse on parempi valinta, koska sitä tukevat kaikki selaimet, jopa hyvin vanhat. Yleisesti ottaen text-decoration-lineilmoituksen käyttäminen on järkevää vain, kun kirjoitat pitkäikäisen tyylisäännön, joka sisältää text-decoration-styletai text-decoration-colorilmoituksen. Jos haluat käyttää kaikkia kolmea yhdessä, voit käyttää lyhytominaisuutta text-decoration.

Lyhyt

text-decoration-linevoidaan käyttää yhdessä lyhenteen CSS3- ominaisuuden kanssa text-decoration-styleja text-decoration-colorsiinä text-decoration(tällä hetkellä vain Firefox tukee tätä täysin):

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

Demo

Tämä esittely toimii Safarissa, Firefoxissa ja Chromessa, kun kokeelliset verkkosivusto-ominaisuudet ovat käytössä. blinkArvo ei sisälly.

Katso CSS-Tricksin (@ css-tricks) kynän tekstikoristelu-rivi CodePenistä.

Liittyvät

  • tekstikoristelu
  • tekstikoristelu-tyyli
  • teksti-sisustus-väri
  • teksti-sisustus-ohita

Lisää tietoa

  • text-decoration-line W3C-määrityksessä
  • text-decoration-line osoitteessa MDN

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
31 * † 7,1 * 6 ‡ Ei mitään Ei mitään Ei mitään 8 *

* -webkitetuliitteellä
† kokeellisella Web-alustalla on lippu käytössä
‡ 6-35 -mozetuliitteellä, esivalitsematon 36: sta alkaen.