We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

当 text-decoration属性的值设置为 underline 之后,可以用 text-underline-position 属性为其设置下划线的位置。
 
/* 只设置一个属性值 */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* 设置多个属性值 */
text-underline-position: under left;
text-underline-position: right under;

/* 全局属性值 */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;

初始值auto
适用元素all elements
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序order of appearance in the formal grammar of the values

语法

属性值

auto
用户代理 会根据自己的算法来确认下划线是放在字母基线上还是 放在字母基线下方。
under
强制下划线的位置为字母基线的下方,在这个位置,下划线不会穿过任何字母,这样能确保数学方程式或者化学式的下标不会被下划线阻挡。
left
在垂直排版模式下,使下划线的位置在文字的左侧,在水平排版模式下,和 under 相同。
right
在垂直排版模式下,使下划线的位置在文字的右侧,在水平排版模式下,和 under 相同。
auto-pos
auto的同义词 ,应使用 auto
above
强制下划线放置于文本上面。当使用东亚文字时,此效果和使用 auto 相同。
below
强制下划线放置于文本下面。当使用字母文字的时候,此效果和使用 auto 相同。

正式语法

auto | [ under || [ left | right ] ]

示例

由于 text-underline-position 属性可以继承,且无法用 text-decoration 简写属性重置,所以应当在全局级别设置其值。比如,under 值对一篇包括大量使用下标的数学或者化学公式的文档是非常有用的。

:root {
  text-underline-position: under;
}

规范

说明 状态 说明
CSS Text Decoration Module Level 3
text-underline-position
Candidate Recommendation 初始定义

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support3312 No6 No No
under33 ? No No No No
left and right No1 ? No No No No
above and below No ? No5 No No
auto-pos No ? No6 No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No Yes No No No No
under ? ? ? ? ? ? ?
left and right ? ? ? ? ? ? No
above and below ? ? ? ? ? ? No
auto-pos ? ? ? ? ? ? No

1. See bug 313888.

参阅

文档标签和贡献者

此页面的贡献者: zxsunrise, maoyumaoxun
最后编辑者: zxsunrise,