文本竖排组合 | 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——没有特别的处理。
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 | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
