在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

text-combine-upright CSS property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.

This is used to produce an effect that is known as tate-chū-yoko ( 縦中横 ) in Japanese, or as 直書橫向 in 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

There is no special processing.

all

Attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.

digits <integer>?

Attempts to display a sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range of 2-4 are invalid.

形式定义

初始值	none
适用于	non-replaced inline elements
继承	yes
计算值	specified keyword, plus integer if 'digits'
动画类型	discrete

形式句法

none | all | [ digits <integer>? ]
					

范例

Digits

The digits value requires less markup than the all value when digits are being combined, but it is currently not very widely supported by browsers.

HTML

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

CSS

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

Results

Screenshot	Live sample

所有

The all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.

HTML

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

CSS

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

Results

Screenshot	Live sample

规范

规范	状态	注释
CSS Writing Modes Level 4 The definition of 'text-combine-upright' in that specification.	候选推荐	Add digits value
CSS Writing Modes Module Level 3 The definition of 'text-combine-upright' in that specification.	Proposed Recommendation	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
text-combine-upright	Chrome 完整支持 48 完整支持 48 部分支持 9 注意事项 Alternate Name 注意事项 This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification , supporting the values none and horizontal without digits . Alternate Name Uses the non-standard name: -webkit-text-combine	Edge 完整支持 12 Alternate Name 完整支持 12 Alternate Name Alternate Name Uses the non-standard name: -ms-text-combine-horizontal	Firefox 完整支持 81 注意事项 完整支持 81 注意事项 注意事项 Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81. 完整支持 48 注意事项 注意事项 Before version 48, Firefox did not implement layout support for tate-chū-yoko. 完整支持 41 Disabled Disabled From version 41: this feature is behind the layout.css.text-combine-upright.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 31 — 41 Disabled Disabled From version 31 until version 41 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 26 — 31 Alternate Name Disabled Alternate Name Uses the non-standard name: text-combine-horizontal Disabled ). To change preferences in Firefox, visit about:config.	IE 完整支持 11 Alternate Name 完整支持 11 Alternate Name Alternate Name Uses the non-standard name: -ms-text-combine-horizontal	Opera 完整支持 35 完整支持 35 部分支持 15 注意事项 Alternate Name 注意事项 This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification , supporting the values none and horizontal without digits . Alternate Name Uses the non-standard name: -webkit-text-combine	Safari 部分支持 5.1 注意事项 Alternate Name 部分支持 5.1 注意事项 Alternate Name 注意事项 This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification , supporting the values none and horizontal without digits . Alternate Name Uses the non-standard name: -webkit-text-combine	WebView Android 完整支持 48 完整支持 48 部分支持 ≤37 注意事项 Alternate Name 注意事项 This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification , supporting the values none and horizontal without digits . Alternate Name Uses the non-standard name: -webkit-text-combine	Chrome Android 完整支持 48 完整支持 48 部分支持 18 注意事项 Alternate Name 注意事项 This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification , supporting the values none and horizontal without digits . Alternate Name Uses the non-standard name: -webkit-text-combine	Firefox Android 完整支持 81 注意事项 完整支持 81 注意事项 注意事项 Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81. 完整支持 48 注意事项 注意事项 Before version 48, Firefox did not implement layout support for tate-chū-yoko. 完整支持 41 Disabled Disabled From version 41: this feature is behind the layout.css.text-combine-upright.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 31 — 41 Disabled Disabled From version 31 until version 41 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 26 — 31 Alternate Name Disabled Alternate Name Uses the non-standard name: text-combine-horizontal Disabled ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 35 完整支持 35 部分支持 14 注意事项 Alternate Name 注意事项 This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification , supporting the values none and horizontal without digits . Alternate Name Uses the non-standard name: -webkit-text-combine	Safari iOS 部分支持 5 注意事项 Alternate Name 部分支持 5 注意事项 Alternate Name 注意事项 This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification , supporting the values none and horizontal without digits . Alternate Name Uses the non-standard name: -webkit-text-combine	Samsung Internet Android 完整支持 5.0 完整支持 5.0 部分支持 1.0 注意事项 Alternate Name 注意事项 This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification , supporting the values none and horizontal without digits . Alternate Name Uses the non-standard name: -webkit-text-combine
digits	Chrome 不支持 No	Edge 不支持 12 — 79	Firefox 完整支持 48 注意事项 Disabled 完整支持 48 注意事项 Disabled 注意事项 Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635 ). Disabled ). To change preferences in Firefox, visit about:config.	IE 完整支持 11	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 48 注意事项 Disabled 完整支持 48 注意事项 Disabled 注意事项 Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635 ). Disabled ). To change preferences in Firefox, visit about:config.	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

使用非标名称。

使用非标名称。

另请参阅

• writing-mode , text-orientation

元数据

• 最后修改： Jul 21, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Writing Modes
4. 特性

   1. direction
   2. text-combine-upright
   3. text-orientation
   4. unicode-bidi
   5. writing-mode