Text-underline-offset - CSS-temppuja

text-underline-offsetOmaisuus CSS asettaa etäisyys muotoilussa nostetaan niiden alkuasentoon.

.text ( text-underline-offset: 0.5em; )

Kun olet lisännyt alleviivauksen elementille käyttämällä text-decorationalleviivauksen arvoa , voit sanoa kuinka kaukana rivin tulisi olla tekstistäsi käyttämällä text-underline-offsetominaisuutta.

Arvot

• auto: (Oletus) Selain määrittää sopivan siirtymän alleviivauksille.
• : Mikä tahansa kelvollinen pituus määritetyllä yksiköllä (negatiiviset arvot mukaan lukien). Tämä korvaa kaikki fontin ja selaimen oletusarvot.
• percentage: Määrittää alleviivojen siirtymän prosentteina 1em elementin kirjasimessa.
• initial: Ominaisuuden oletusasetus, joka on auto.
• inherit: Hyväksyy vanhemman alleviivatun offset-arvon.
• unset: Poistaa nykyisen siirtymän elementistä.

Demo

Seuraavassa esittelyssä voit muuttaa arvon arvoa text-underline-offsetnähdäksesi, miten se vaikuttaa elementin tekstikoristeluun:

Huomautuksia

• text-underline-offset ei ole osa text-decoration.
• Se ei toimi muilla text-decorationlinjoilla, kuten line-throughtai overline.
• Negatiiviset arvot hyväksytään, mikä kompensoi alleviivaa sisäänpäin.

Se on jatkuva jälkeläisille

Kun olet asettanut koristelun elementille, myös kaikilla sen lapsilla on koriste. Kuvittele nyt, että haluat muuttaa yhden lapsen alleviivauksen siirtymää:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Tämä ei toimi, koska et voi ohittaa esi-elementtien määrittämää alleviivausta. Jotta tämä toimisi, sinun on määritettävä alleviivauskohtaisuus itse elementille:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Emien käyttöä suositellaan

Suhteellisen arvon, kuten em, käytön etuna on, että siirtymä skaalautuu font-sizearvon muuttuessa . Toisaalta, jos käytät kiinteää pituusyksikköä (esim. Pikseleitä), siirtymä ei sopeudu muutoksiin, eikä se välttämättä ole etäisyys, jonka haluat saada tekstillesi:

Prosenttiosuus ja kaskadi

Tämän ominaisuuden pituus periytyy kiinteänä arvona, eikä sitä skaalata kirjasimen kanssa. Toisaalta prosenttiosuus periytyy suhteellisena arvona ja sen vuoksi skaalautuu kirjasimen muutosten myötä.

Seuraava demo näyttää vertailun em-arvon ja prosenttiosuuksien välillä perintötapauksissa, ja kuten näette, vasemmalla puolella (jossa emiä käytämme) peritty arvo on kiinteä pituus. Voit tarkistaa lasketun arvon DevTools-laitteesta. Tämä tarkoittaa, että se ei muutu kirjasimen muutoksen myötä. Oikealla puolella tekstit kuitenkin perivät suhteellisen arvon (tässä tapauksessa 100%); siksi offset skaalautuu fontin muutoksella:

Kirjoitustilat ja teksti-alleviiva-sijainti

Pystysuuntaisen kirjoitustilan käyttäminen vaikuttaa alleviivan sijaintiin. Se muuttaa elementtiin sovelletun siirtymän suuntaa. Pelaa seuraavassa esittelyssä olevilla arvoilla:

Liittyvät

• text-decoration
• text-underline-position
• text-decoration-thickness

Lisää tietoa

CSS-tekstikoristelumoduuli, taso 4 (toimittajan luonnos)

Selaimen tuki

Tämän kirjoituksen aikaan Firefox on ainoa selain, jolla on täysi tuki. Safari ei tue prosenttiosuuksia.

text-underline-offset

IE	Reuna	Firefox	Kromi	Safari	Ooppera
Ei	Ei	70+	Ei	12.1+	Kaikki

Android Chrome	Android Firefox	Android- selain	iOS Safari	Opera Mini
Ei	Ei	Ei	12.2+	Joo

text-underline-offset: prosenttiosuus

IE	Reuna	Firefox	Kromi	Safari	Ooppera
Ei	Ei	74+	Ei	Ei	Ei

Android Chrome	Android Firefox	Android- selain	iOS Safari	Opera Mini
Ei	Ei	Ei	Ei	Joo