文本竖排组合 | 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;

Initial value	none
Applies to	non-replaced inline elements
Inherited	yes
Media	visual
Computed value	specified keyword, plus integer if 'digits'
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

句法

可能值

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;
}

Screenshot	Live sample
​	​

实例（全部）

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 }

Screenshot	Live sample
​	​

规范

Specification	Status	Comment
CSS Writing Modes Module Level 3The definition of 'text-combine-upright' in that specification.	Candidate Recommendation	Initial definition
UnknownThe definition of 'text-combine-upright' in that specification.	Unknown	Add digits value

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit1 48.0	(Yes)	48.0 (48.0)2	11.0-ms3	(Yes)-webkit1	(Yes)-webkit1
digits	No support	?	No support4	11.0-ms3	No support	?

Feature	Android	Android Webview	Edge	Chrome for Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support	48.0	(Yes)	48.0	48.0 (48.0)2	No support	No support	No support
digits	?	?	?	No support4	?	?	?	?

  CSS 中文开发手册

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

转载请保留页面地址：https://www.breakyizhan.com/css/32015.html