文本竖排组合 | text-combine-upright
text-combine-upright
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——没有特别的处理。
形式语法
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 | ? | ? | ? | ? |
