此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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。