Text-underline-offset - CSS-trikovi

text-underline-offsetNekretnina u CSS postavlja udaljenost teksta naglašava iz njihove početne pozicije.

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

Jednom kada primijenite podcrtavanje za element koji koristi text-decorationvrijednost podcrtavanja , pomoću text-underline-offsetsvojstva možete reći koliko bi taj redak trebao biti udaljen od vašeg teksta .

Vrijednosti

• auto: (Zadano) Preglednik će odrediti odgovarajući pomak za podcrtavanje.
• : Svaka valjana duljina s navedenom jedinicom (uključujući negativne vrijednosti). Ovo zamjenjuje sve podatke u fontu i zadane postavke preglednika.
• percentage: Određuje pomak podvlačenja kao postotak od 1em u fontu elementa.
• initial: Zadana postavka svojstva, koja je automatska.
• inherit: Prihvaća vrijednost pomaka podcrtavanja roditelja.
• unset: Uklanja trenutni pomak iz elementa.

Demo

U sljedećem pokaznom prikazu možete promijeniti vrijednost da text-underline-offsetbiste vidjeli kako to utječe na ukrašavanje teksta elementa:

Bilješke

• text-underline-offset nije dio stenografije text-decoration.
• To ne radi na drugim text-decorationlinijama, kao što su line-throughi overline.
• Prihvaćaju se negativne vrijednosti, što podvlači podvlačenje prema unutra.

To je konstantno za potomke

Jednom kada postavite ukras za element, sva će djeca imati i taj ukras. Sad zamislite da želite promijeniti pomak podcrtavanja za jedno od djece:

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

To ne radi jer ne možete nadjačati pomak podcrtavanja navedenog elementima pretka. Da bi ovo uspjelo, morate postaviti posebnost podcrtavanja za sam element:

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

Preporučuje se upotreba em

Prednost korištenja relativne vrijednosti poput em je u tome što će se pomak skalirati s promjenom font-sizevrijednosti. S druge strane, ako koristite jedinicu fiksne duljine (npr. Piksele), pomak se neće prilagoditi promjenama i možda neće biti udaljenost koju biste željeli imati za svoj tekst:

Postotak i kaskada

Za ovo svojstvo duljina će se naslijediti kao fiksna vrijednost i neće se skalirati fontom. S druge strane, postotak će naslijediti kao relativnu vrijednost i, prema tome, skalirati s promjenama u fontu kako nasljeđuje.

Sljedeća demonstracija prikazuje usporedbu korištenja vrijednosti em i postotka u slučaju nasljeđivanja i, kao što vidite, na lijevoj strani (u kojoj se koristimo em) naslijeđena vrijednost je fiksne duljine. Izračunatu vrijednost možete provjeriti u svojim DevTools. To znači da se ne mijenja s promjenom fonta. S desne strane, međutim, tekstovi nasljeđuju relativnu vrijednost (u ovom slučaju 100%); dakle ofset skale s promjenom fonta:

Načini pisanja i položaj podcrtavanja teksta

Okomiti način pisanja utječe na položaj podcrtavanja. To će promijeniti smjer pomaka primijenjenog na element. Poigrajte se vrijednostima u sljedećem demonstracijskom programu:

Povezano

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

Više informacija

CSS modul za ukrašavanje teksta razina 4 (urednikov nacrt)

Podrška preglednika

U vrijeme pisanja ovog članka, Firefox je jedini preglednik s punom podrškom. Safari ne podržava postotne vrijednosti.

tekst-podcrtavanje-ofset

IE	Rub	Firefox	Krom	Safari	Opera
Ne	Ne	70+	Ne	12,1+	svi

Android Chrome	Android Firefox	Android preglednik	iOS Safari	Opera Mini
Ne	Ne	Ne	12,2+	Da

podcrtavanje-pomak teksta: postotak

IE	Rub	Firefox	Krom	Safari	Opera
Ne	Ne	74+	Ne	Ne	Ne

Android Chrome	Android Firefox	Android preglednik	iOS Safari	Opera Mini
Ne	Ne	Ne	Ne	Da