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

Anonim

В text-underline-positionимота определя разположението на подчертаването на връзки или на текст, с text-decoration: underline;приложени.

a ( text-underline-position: under; )

Стойности

Това са стойностите, посочени в W3C CSS Модул за декорация на текст Ниво 3 Препоръка за кандидат:

  • auto: по подразбиране. Браузърът ще реши дали да постави подчертаването в основата на текста или под него.
  • inherit: наследява подчертаната позиция на родителя.
  • under: поставя подчертаването под текста с допълнително пространство, за да се предотврати пресичане на спускащите се надолу.
  • left: за вертикални режими на писане. Това поставя реда вляво от текста.
  • right: за вертикални режими на писане. Това поставя реда вдясно от текста.

Microsoft използва различен набор от стойности за Internet Explorer:

  • auto: по подразбиране. Поставя подчертаването под текста за всички езици с изключение на японски (вижте връзката MSDN в раздела „Повече информация“ по-долу за подробности).
  • above: поставя подчертаването над текста. Визуално идентичен сtext-decoration: overline;
  • below: позиционира подчертаването под текста. Имайте предвид, че това е различно от under- няма да изчисти низходящите.
  • auto-posработи по същия начин като изпълнението на MS на auto.

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

По време на това писане text-underline-positionсе поддържа само частично от Chrome (33+ с активирани експериментални флагове) и Internet Explorer 6+. Chrome поддържа auto, inheritи underстойности от препоръката на W3C кандидат, докато IE поддържа свои собствени алтернативни стойности.

Тази демонстрация показва underи belowстойностите в браузърите, които ги поддържат.

Вижте позицията за подчертаване на текста на писалката от CSS-Tricks (@ css-tricks) на CodePen.

Свързани

  • текст-декорация

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

  • text-underline-position в CSS модул за декорация на текст ниво 3 CR.
  • text-underline-position в MSDN.

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

Chrome Сафари Firefox Опера IE Android iOS
33 * Нито един Нито един Нито един 6 † Нито един Нито един

* с -webkitактивирани префикс и експериментални флагове в chrome: // flags. leftи rightстойности не се поддържат.
† с -msпрефикс и специфични за IE стойности.