Szöveg-aláhúzás-eltolás - CSS-trükkök

A text-underline-offsetCSS tulajdonság megadja az aláhúzások távolságát a kezdeti pozíciótól.

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

Ha aláhúzást alkalmaz egy elemre text-decorationaz aláhúzás értékével , akkor a text-underline-offsettulajdonság segítségével meg tudja mondani, hogy az adott sornak milyen távolságra kell lennie a szövegétől .

Értékek

• auto: (Alapértelmezés) A böngésző megadja az aláhúzások megfelelő eltolását.
• : Bármely érvényes hossz meghatározott egységgel (a negatív értékeket is beleértve). Ez helyettesíti a betűtípusban és a böngésző alapértelmezett információit.
• percentage: Az aláhúzások eltolását az 1em százalékában adja meg az elem betűtípusában.
• initial: A tulajdonság alapértelmezett beállítása, amely automatikus.
• inherit: Elfogadja a szülő aláhúzási offset értékét.
• unset: Eltávolítja az aktuális eltolást az elemről.

Demó

A következő bemutatóban megváltoztathatja a (z) értékét, text-underline-offsethogy lássa, hogyan befolyásolja az elem szövegdekorációját:

Megjegyzések

• text-underline-offset nem része a gyorsírásnak text-decoration.
• Ez nem működik más text-decorationvonalakon, például line-throughvagy overline.
• Negatív értékeket fogadunk el, ami ellensúlyozza az aláhúzást befelé.

Az utódok számára állandó

Miután beállított egy elemhez egy dekorációt, annak minden gyermeke is megkapja ezt a díszítést. Most képzelje el, hogy meg szeretné változtatni az egyik gyermek aláhúzásának eltolását:

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

Ez nem működik, mert nem lehet felülírni az ősök által megadott aláhúzás eltolását. Ahhoz, hogy ez működjön, meg kell adnia egy aláhúzás-specifikumot magának az elemnek:

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

Az em használata ajánlott

Az olyan relatív érték használatának előnye, mint az em, hogy az eltolás az font-sizeérték változásával növekszik. Másrészt, ha fix hosszúságú egységet (pl. Pixeleket) használ, akkor az eltolás nem alkalmazkodik a változásokhoz, és lehet, hogy nem ez a távolság, amelyet a szövegéhez szeretne:

Százalék és a kaszkád

Ennél a tulajdonságnál a hosszúság rögzített értékként öröklődik, és nem méretezhető a betűkészlettel. Másrészt a százalékos érték relatív értékként öröklődik, és ezért a betűkészlet változásaival skálázódik.

A következő bemutató bemutatja az em és a százalékos értékek összehasonlítását öröklés esetén, és amint láthatja, a bal oldalon (amelyben em-t használunk) az öröklött érték fix hosszúságú. A kiszámított értéket a DevTools-ban ellenőrizheti. Ez azt jelenti, hogy nem méretezhető a betűtípus változásával. A jobb oldalon azonban a szövegek viszonylagos értéket (ebben az esetben 100% -ot) örökölnek; ezért az eltolás a betűkészlet változásával skálázódik:

Írásmódok és szöveg-aláhúzás-pozíció

A függőleges írásmód hatással van az aláhúzás helyzetére. Ez megváltoztatja az elemen alkalmazott eltolás irányát. Játssz a következő bemutató értékeivel:

Összefüggő

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

Több információ

CSS szövegdekorációs modul, 4. szint (a szerkesztő tervezete)

Böngésző támogatás

Az írás idején a Firefox az egyetlen böngésző, amely teljes támogatást nyújt. A Safari nem támogatja a százalékos értékeket.

szöveg-aláhúzás-eltolás

AZAZ	Él	Firefox	Króm	Szafari	Opera
Nem	Nem	70+	Nem	12.1+	Összes

Android Chrome	Android Firefox	Android böngésző	iOS Safari	Opera Mini
Nem	Nem	Nem	12.2+	Igen

szöveg-aláhúzás-eltolás: százalék

AZAZ	Él	Firefox	Króm	Szafari	Opera
Nem	Nem	74+	Nem	Nem	Nem

Android Chrome	Android Firefox	Android böngésző	iOS Safari	Opera Mini
Nem	Nem	Nem	Nem	Igen