文本下划线位置 | 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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
