text-emphasis-position

CSS 属性 text-emphasis-position 设置强调标记的位置。强调标记（如注音字符）在没有足够空间时，会自动增加行高。

```css interactive-example-choice text-emphasis-position: auto;


```css interactive-example-choice
text-emphasis-position: over right;

```css interactive-example-choice text-emphasis-position: under right;


```css interactive-example-choice
text-emphasis-position: auto;
writing-mode: vertical-rl;

```css interactive-example-choice text-emphasis-position: over left; writing-mode: vertical-rl;


```css interactive-example-choice
text-emphasis-position: over right;
writing-mode: vertical-rl;

```html interactive-example

I'd far rather be happy than right any day.


```css interactive-example
p {
  font: 1.5em sans-serif;
}

#example-element {
  text-emphasis: filled double-circle #ffb703;
}

语法

/* 初始值 */
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
- : 在水平书写模式下，在文本上方绘制标记。
under
- : 在水平书写模式下，在文本下方绘制标记。
right
- : 在垂直书写模式下，在文本右侧绘制标记。
left
- : 在垂直书写模式下，在文本左侧绘制标记。

描述

强调标记的首选位置取决于语言。例如，在日语中，首选位置是 over right；在中文中，首选位置则是 under right。下面的信息表总结了中文、蒙古语和日语的首选强调标记位置：

标记和注音文字的首选强调标记位置
语言	偏好位置		效果
语言	水平排列	垂直排列	效果
日语	上方	右侧
韩语
蒙古语
中文	下方	右侧

[!NOTE] text-emphasis-position 无法使用简写属性 {{cssxref("text-emphasis")}} 进行设置，因此也无法进行重置。

形式定义

形式语法

示例

优先使用注音标记而不是强调标记

一些编辑器在注音标记与强调标记冲突时倾向于隐藏强调标记。在 HTML 中，可以通过以下样式规则实现：

ruby {
  text-emphasis: none;
}

优先使用强调标记而不是注音标记

一些编辑器在强调标记与注音标记冲突时倾向于隐藏注音标记。在 HTML 中，可以通过以下样式规则实现：

em {
  text-emphasis: dot; /* 为 <em> 元素设置 text-emphasis */
}

em rt {
  display: none; /* 隐藏 <em> 元素内部的注音标记 */
}