Текст-подчертаване-отместване - CSS-трикове

В text-underline-offsetимота в CSS определя разстоянието на текстови подчертава от първоначалното си положение.

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

След като приложите подчертаване за елемент, използващ text-decorationсъс стойността на подчертаването , можете да кажете колко далеч трябва да бъде този ред от вашия текст, използвайки text-underline-offsetсвойството.

Стойности

• auto: (По подразбиране) Браузърът ще посочи подходящо отместване за подчертаване.
• : Всяка валидна дължина с определена единица (включително отрицателни стойности). Това замества всяка информация в шрифта и браузъра по подразбиране.
• percentage: Определя отместването на подчертаванията като процент от 1em в шрифта на елемента.
• initial: Настройката по подразбиране на свойството, която е автоматично.
• inherit: Приема подчертаната стойност на отместването на родителя.
• unset: Премахва текущото отместване от елемента.

Демонстрация

В следващата демонстрация можете да промените стойността на, за text-underline-offsetда видите как тя влияе върху текстовата украса на елемента:

Бележки

• text-underline-offset не е част от стенографията на text-decoration.
• Не работи по други text-decorationлинии, като line-throughили overline.
• Приемат се отрицателни стойности, което компенсира подчертаването навътре.

Тя е постоянна за потомците

След като зададете декорация за елемент, всички негови деца също ще имат тази декорация. Сега си представете, че искате да промените отместването на подчертаването за едно от децата:

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

Това не работи, защото не можете да замените отместването на подчертаването, посочено от предшествените елементи. За да работи това, трябва да зададете специфичност за подчертаване на самия елемент:

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

Препоръчва се използването на em

Ползата от използването на относителна стойност като em е, че изместването ще се мащабира с промяната на font-sizeстойността. От друга страна, ако използвате единица с фиксирана дължина (например пиксели), изместването няма да се приспособи към промените и може да не е разстоянието, което искате да имате за вашия текст:

Процент и каскада

За това свойство дължината ще се наследи като фиксирана стойност и няма да се мащабира с шрифта. От друга страна, процентът ще наследи като относителна стойност и следователно ще се мащабира с промени в шрифта, както го наследява.

Следващата демонстрация показва сравнението между използването на em и процентните стойности в случай на наследяване и, както можете да видите, от лявата страна (в която използваме em) наследената стойност е с фиксирана дължина. Можете да проверите изчислената стойност във вашите DevTools. Това означава, че не се мащабира с промяната в шрифта. От дясната страна обаче текстовете наследяват относителна стойност (в случая 100%); следователно компенсира скалите с промяната в шрифта:

Режими на писане и подчертаване на текста

Наличието на вертикален режим на писане оказва влияние върху позицията на подчертаването. Това ще промени посоката на отместването, приложено върху елемента. Играйте със стойностите в следната демонстрация:

Свързани

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

Повече информация

CSS Модул за декорация на текст Ниво 4 (Чернова на редактора)

Поддръжка на браузър

По време на това писане Firefox е единственият браузър с пълната поддръжка. Safari не поддържа процентни стойности.

текст-подчертаване-отместване

IE	Ръб, край	Firefox	Chrome	Сафари	Опера
Не	Не	70+	Не	12.1+	всичко

Android Chrome	Android Firefox	Браузър за Android	iOS Safari	Opera Mini
Не	Не	Не	12.2+	Да

text-underline-offset: процент

IE	Ръб, край	Firefox	Chrome	Сафари	Опера
Не	Не	74+	Не	Не	Не

Android Chrome	Android Firefox	Браузър за Android	iOS Safari	Opera Mini
Не	Не	Не	Не	Да