文本竖排组合 | text-combine-upright (Writing Modes) - CSS 中文开发手册 - Break易站
2021-01-28 02:14
文本竖排组合 | 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
形式语法
none | all | [ digits? ]
实例(数字)
当数字被组合时,数字值(digital value)比所有值(all value)所需的标记要少,但是目前并没有得到浏览器的广泛支持。
平成20年4月16日に
.exampleText { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; }
Screenshot | Live sample |
---|---|
? | ? |
实例(全部)
all value需要标记每个水平文本片段,但相较数字值, 目前它得到更多浏览器的支持。
民國105年4月29日
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 | ? | ? | ? | ? |
文章标题:文本竖排组合 | text-combine-upright (Writing Modes) - CSS 中文开发手册 - Break易站
文章链接:http://soscw.com/index.php/essay/48025.html