Text-subliniere-offset - CSS-Tricks

text-underline-offsetProprietatea în CSS stabilește distanța sublinieri text de la poziția lor inițială.

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

Odată ce ați aplicat o subliniere pentru un element folosind text-decorationcu valoarea de subliniere , puteți spune cât de departe ar trebui să fie linia de textul dvs. folosind text-underline-offsetproprietatea.

Valori

• auto: (Implicit) Browserul va specifica un offset adecvat pentru sublinieri.
• : Orice lungime validă cu o unitate specificată (inclusiv valori negative). Aceasta înlocuiește orice informație din font și implicit din browser.
• percentage: Specifică decalajul sublinierilor ca procent de 1em în fontul elementului.
• initial: Setarea implicită a proprietății, care este automată.
• inherit: Adoptă valoarea de compensare subliniată a părintelui.
• unset: Elimină decalajul curent din element.

Demo

În următoarea demonstrație puteți modifica valoarea text-underline-offsetpentru a vedea cum afectează decorarea textului elementului:

Note

• text-underline-offset nu face parte din stenograma text-decoration.
• Nu funcționează pe alte text-decorationlinii, cum ar fi line-throughsau overline.
• Sunt acceptate valori negative, care compensează sublinierea spre interior.

Este constantă pentru descendenți

Odată ce ați setat un decor pentru un element, toți copiii acestuia vor avea și el acel decor. Acum imaginați-vă că doriți să schimbați compensarea sublinierii pentru unul dintre copii:

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

Acest lucru nu funcționează deoarece nu puteți suprascrie un decalaj al unei sublinieri specificate de elementele strămoșești. Pentru ca acest lucru să funcționeze, trebuie să setați o specificitate subliniată pentru elementul în sine:

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

Se recomandă utilizarea em

Avantajul utilizării unei valori relative precum em este că offsetul se va scala odată cu modificarea font-sizevalorii. Pe de altă parte, dacă utilizați o unitate de lungime fixă ​​(de exemplu, pixeli), offset-ul nu se va regla la modificări și este posibil să nu fie distanța pe care ați dori să o aveți pentru text:

Procentajul și cascada

Pentru această proprietate, o lungime va moșteni ca valoare fixă ​​și nu se va scala cu fontul. Pe de altă parte, un procent va moșteni ca valoare relativă și, prin urmare, va scala cu modificări ale fontului pe măsură ce moștenește.

Următoarea demonstrație arată comparația dintre utilizarea valorilor em și procentuale în cazul moștenirii și, după cum puteți vedea, în partea stângă (în care le folosim) valoarea moștenită este o lungime fixă. Puteți verifica valoarea calculată în DevTools. Asta înseamnă că nu se extinde odată cu modificarea fontului. În partea dreaptă, însă, textele moștenesc o valoare relativă (în acest caz 100%); prin urmare, decalajul se modifică cu modificarea fontului:

Moduri de scriere și text-subliniere-poziție

A avea un mod de scriere vertical are un efect asupra poziției subliniului. Aceasta va schimba direcția offsetului aplicat pe element. Joacă-te cu valorile din următoarea demonstrație:

Legate de

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

Mai multe informatii

Modulul de decorare a textului CSS Nivelul 4 (Proiectul editorului)

Suport pentru browser

În momentul redactării acestui articol, Firefox este singurul browser cu suport complet. Safari nu acceptă valori procentuale.

text-subliniere-offset

IE	Margine	Firefox	Crom	Safari	Operă
Nu	Nu	Peste 70 de ani	Nu	12.1+	Toate

Android Chrome	Android Firefox	Browser Android	Safari iOS	Opera Mini
Nu	Nu	Nu	12.2+	da

text-subliniere-offset: procent

IE	Margine	Firefox	Crom	Safari	Operă
Nu	Nu	Peste 74 de ani	Nu	Nu	Nu

Android Chrome	Android Firefox	Browser Android	Safari iOS	Opera Mini
Nu	Nu	Nu	Nu	da