text-emphasis-position
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年3月.
* Some parts of this feature may have varying levels of support.
CSS 属性 text-emphasis-position 设置强调标记的位置。强调标记（如注音字符）在没有足够空间时，会自动增加行高。
尝试一下
text-emphasis-position: auto; text-emphasis-position: over right; text-emphasis-position: under right; text-emphasis-position: auto; writing-mode: vertical-rl; text-emphasis-position: over left; writing-mode: vertical-rl; text-emphasis-position: over right; writing-mode: vertical-rl; <section id="default-example"> <p> I'd far rather be <span class="transition-all" id="example-element">happy than right</span> any day. </p> </section> p { font: 1.5em sans-serif; } #example-element { text-emphasis: filled double-circle #ffb703; } 语法
css
/* 初始值 */ text-emphasis-position: over right; /* 关键字值 */ text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under; /* 全局值 */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: revert; text-emphasis-position: revert-layer; text-emphasis-position: unset; 取值
描述
强调标记的首选位置取决于语言。例如，在日语中，首选位置是 over right；在中文中，首选位置则是 under right。下面的信息表总结了中文、蒙古语和日语的首选强调标记位置：
| 语言 | 偏好位置 | 效果 | ||
|---|---|---|---|---|
| 水平排列 | 垂直排列 | |||
| 日语 | 上方 | 右侧 |  |  |
| 韩语 | ||||
| 蒙古语 | ||||
| 中文 | 下方 | 右侧 |  | |
备注：text-emphasis-position 无法使用简写属性 text-emphasis 进行设置，因此也无法进行重置。
形式定义
形式语法
text-emphasis-position =
[ over | under ] &&
[ right | left ]?
示例
优先使用注音标记而不是强调标记
一些编辑器在注音标记与强调标记冲突时倾向于隐藏强调标记。在 HTML 中，可以通过以下样式规则实现：
css
ruby { text-emphasis: none; } 优先使用强调标记而不是注音标记
一些编辑器在强调标记与注音标记冲突时倾向于隐藏注音标记。在 HTML 中，可以通过以下样式规则实现：
css
em { text-emphasis: dot; /* 为 <em> 元素设置 text-emphasis */ } em rt { display: none; /* 隐藏 <em> 元素内部的注音标记 */ } 规范
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-emphasis-position-property |
浏览器兼容性
Loading…
参见
- 相关全称属性：
text-emphasis-style、text-emphasis-color，以及对应的简写属性text-emphasis。