Тект-ундерлине-оффсет - ЦСС-трикови

text-underline-offsetИмовина у ЦСС поставља удаљеност текстуалних истиче из њихове почетне позиције.

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

Једном када примените подвлаку за елемент који користи text-decorationвредност подвлачења , помоћу text-underline-offsetсвојства можете рећи колико та линија треба да буде удаљена од вашег текста .

Вредности

• auto: (Подразумевано) Прегледник ће одредити одговарајуће одступање за подвлачење.
• : Свака важећа дужина са назначеном јединицом (укључујући негативне вредности). Ово замењује све информације у фонту и подразумеване поставке прегледача.
• percentage: Одређује помак подвлачења као проценат од 1ем у фонту елемента.
• 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! */ )

Препоручује се употреба ем

Предност употребе релативне вредности као што је ем је та што ће се одступање скалирати променом font-sizeвредности. С друге стране, ако користите јединицу фиксне дужине (нпр. Пикселе), офсет се неће прилагодити променама и можда неће бити удаљеност коју бисте желели да имате за свој текст:

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

За ово својство, дужина ће се наследити као фиксна вредност и неће се скалирати фонтом. С друге стране, проценат ће наследити као релативну вредност и, према томе, скалирати са променама у фонту како наслеђује.

Следећа демонстрација показује поређење између употребе ем и процентуалних вредности у случају наследства и, као што видите, на левој страни (у којој користимо ем) наследјена вредност је фиксне дужине. Израчунату вредност можете проверити у својим ДевТоолс. То значи да се не мења с променом фонта. На десној страни, међутим, текстови наслеђују релативну вредност (у овом случају 100%); дакле офсет скале са променом фонта:

Начини писања и положај подвлачења текста

Вертикални режим писања утиче на положај подвлачења. То ће променити смер померања примењеног на елемент. Поиграјте се вредностима у следећем демо:

Повезан

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

Више информација

ЦСС модул за украшавање текста ниво 4 (уредников нацрт)

Подршка прегледача

У време писања овог текста, Фирефок је једини прегледач са пуном подршком. Сафари не подржава проценат вредности.

подвлачење текста-офсет

ИЕ	Ивица	Фирефок	Хром	Сафари	Опера
Не	Не	70+	Не	12.1+	Све

Андроид Цхроме	Андроид Фирефок	Андроид претраживач	иОС Сафари	Опера Мини
Не	Не	Не	12.2+	да

потцртавање-помак текста: проценат

ИЕ	Ивица	Фирефок	Хром	Сафари	Опера
Не	Не	74+	Не	Не	Не

Андроид Цхроме	Андроид Фирефок	Андроид претраживач	иОС Сафари	Опера Мини
Не	Не	Не	Не	да