文本竖排组合 | text-combine-upright (Writing Modes) - CSS 中文开发手册 - Break易站

??CSS 中文开发手册

文本竖排组合 | text-combine-upright (Writing Modes) - CSS 中文开发手册

text-combine-upright CSS属性将多个字符的组合指定到单个字符的空间中。如果组合文本宽于1em，则用户代理必须调整到1em内的内容。所得到的组合物被视为用于布局和装饰的单个直立字形。此属性仅在垂直书写模式下有效。

这是用来产生一个在日语中称为“中横”（tate-chū-yoko）的效果，或者是以直书横向（Chinese）的方式产生的效果。

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

/* Digits values */
text-combine-upright: digits;     /* fits 2 consecutive digits horizontally inside vertical text */
text-combine-upright: digits 4;   /* fits up to 4 consecutive digits horizontally inside vertical text */

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

句法

可能值

none——没有特别的处理。

all——尝试将水平方框内的所有连续字符排版，以便它们占据框的垂直线内的单个字符的空间。

digits <integer>?——尝试显示一个连续的ASCII数字（U + 0030-U + 0039），该数字与指定的整数具有相同或更少的字符数目，从而占用垂直线框内单个字符的空间。如果省略整数，则计算出的值最大为2。范围之外的整数是无效的。

形式语法

none | all | [ digits <integer>? ]

实例（数字）

当数字被组合时，数字值(digital value)比所有值(all value)所需的标记要少，但是目前并没有得到浏览器的广泛支持。

<p lang="ja" class="exampleText">平成20年4月16日に</p>

.exampleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}

实例（全部）

all value需要标记每个水平文本片段，但相较数字值, 目前它得到更多浏览器的支持。

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

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

规范

浏览器兼容性

??CSS 中文开发手册