CSS参考手册
文字装饰 | Text Decoration
文本下划线位置 | text-underline-position
该text-underline-position
CSS属性指定当使用text-decoration
属性的underline
值时下划线的位置。
/* Keyword values */
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;
/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;
Initial value |
auto |
---|---|
Applies to |
all elements |
Inherited |
yes |
Media |
visual |
Computed value |
as specified |
Animation type |
discrete |
Canonical order |
order of appearance in the formal grammar of the values |
语法
可能值
auto
——允许浏览器使用算法在under
和alphabetic
之间进行选择。
under
——强制将下划线设置在alphabetic baseline以下,即使其在不会越到下一行的任何位置。这对于确保使用大量下标的化学和数学公式很有用。
left——
在垂直方向的writing-modes中,这个关键字强制在文本的左侧放置线条。在水平writing-modes
中,它是under
的一个同义词。
right
——在垂直writing-modes中,这个关键字强制在文本的右侧放置该线条。在水平writing-modes
中,它是under
的一个同义词。
auto-pos
——auto
的一个同义词,建议代替auto
使用。
above
——强制该下划线在文本上方。与东亚文本一起使用时,使用auto
关键字会导致类似的效果。
below
——强制该下划线在文本下面。当与字母文字一起使用时,使用auto
关键字会导致类似的效果。
形式语法
auto | [ under || [ left | right ] ]
实例
由于该text-underline-position
属性可被继承并且不被text-decoration
简写属性重置,因此可以将其值设置为全局级别。例如,该under
值可能适用于具有大量化学和数学公式的文档,这些文档大量使用了下标。
:root {
text-underline-position: under;
}
规范
Specification |
Status |
Comment |
---|---|---|
CSS Text Decoration Module Level 3The definition of 'text-underline-position' in that specification. |
Candidate Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support (auto) |
33.0 |
(Yes) |
No support |
61 |
No support |
No support |
under |
33.0 |
? |
No support |
No support |
No support |
No support |
left, right |
No support2 |
? |
No support |
No support |
No support |
No support |
above, below |
No support |
? |
No support |
51 |
No support |
No support |
auto-pos |
No support |
? |
No support |
61 |
No support |
No support |
Feature |
Android |
Chrome for Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support |
No support |
No support |
(Yes) |
No support |
? |
No support |
No support |
文字装饰 | Text Decoration相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。