text-combine-upright

**text-combine-upright** CSS 属性将字符组合成单个字符的空间。如果组合后的文本宽度超过 1em，用户代理必须将内容调整到 1em 内。生成的组合被视为布局和装饰的单个垂直字形。此属性仅在垂直书写模式下有效。

这用于产生在日语中被称为 tate-chū-yoko 縦中横或在中文中被称为橫向文字的效果。

试试

语法

css

/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;

/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;

值

none: 没有特殊处理。
all: 尝试在框内水平排版所有连续字符，以便它们在框的垂直线内占用单个字符的空间。

注意：CSS 书写模式模块为 text-combine-upright 属性定义了一个 digits <integer> 值，以显示两个到四个连续的 ASCII 数字（U+0030–U+0039），使它在垂直线框内占用单个字符的空间，但是，这不受任何浏览器的支持。

正式定义

初始值	`none`
应用于	非替换内联元素
继承	是
计算值	指定的关键字，如果为 'digits' 则加整数
动画类型	不可动画

正式语法

text-combine-upright = 
  none                         |
  all                          |
  [ digits <integer [2,4]>? ]

示例

对水平文本使用 'all'

all 值需要围绕每段水平文本的标记，但目前受支持的浏览器比 digits 值多。

HTML

html

<p lang="zh-Hant">
  民國<span class="num">105</span>年<span class="num">4</span>月<span
    class="num"
    >29</span
  >日
</p>

CSS

css

html {
  writing-mode: vertical-rl;
  font: 24px serif;
}
.num {
  text-combine-upright: all;
}

结果

规范

规范
CSS 书写模式级别 4 # text-combine-upright

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

writing-mode，text-orientation