CSS text-combine-upright 语法
在 CSS 中，text-combine-upright 属性使得在垂直排版中的部分文本（如数字），进行水平排列（即横向排列），并且使其占据单个字符的空间。
text-combine-upright 属性主要用于东亚文字（如中文、日文、韩文）的排版，常用于将数字或简短的水平文本在垂直文本中压缩到一个字符的宽度内并保持直立。
语法：
text-combine-upright: 关键字;
text-combine-upright: 数值;说明：
当 text-combine-upright 的取值为关键字时，有如下表 2 种。
| 取值 | 说明 |
|---|---|
| none（默认值） | 不连续横排 |
| all | 连续横排，使其占据单个字符空间 |
当 text-combine-upright 的取值为数值时，其具体语法如下。
text-combine-upright: digits n;上面的 n 表示多少个数字连续横排，范围只能是 [2, 4]，而不能是其他数字，默认值为 2。
注意:
- text-combine-upright 属性只适用于垂直模式（即 writing-mode: vertical-rl;），它本质上为了使得部分特殊文本（如数字）排版的用户体验更好。
- text-combine-upright 的取值为数值这种方式，暂时所有主流浏览器尚未支持。
CSS text-combine-upright 摘要
| 属于 | CSS 文本属性 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS text-combine-upright 示例
想要真正理解 CSS text-combine-upright 属性，我们先来看一下默认情况下的垂直排版样式，请看下面例子。
示例 1：不使用 text-combine-upright
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>大家好，今天是2025年5月20日</p>
</body>
</html>页面效果如下图所示。
分析：
可以看到，在垂直模式下，如果文本包含数字，则数字是顺时针 90°旋转后的效果。如果想要使得每个数字像正常直立的效果，可以使用 text-orientation: upright;。
修改后的 CSS 如下。再次运行后的效果如下图所示。
p {
writing-mode: vertical-lr;
text-orientation: upright;
}
虽然数字是直立起来了，但效果并不理想。如果能够使得 “2025”、“20” 等能够直立并且横向排列，那就好了。此时就可以使用 text-combine-upright 属性来实现。
示例 2：使用 text-combine-upright
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p { writing-mode: vertical-lr; }
p > span {
text-combine-upright: all;
}
</style>
</head>
<body>
<p>大家好，今天是<span>2025</span>年5月<span>20</span>日</p>
</body>
</html>页面效果如下图所示。
分析：
text-combine-upright: all; 会使得当前元素所有文本都是横向排列，因此我们不能直接在 p 元素使用它，而是应该给 “2025” 和 “20” 这些需要横向排列的局部文字使用 span 元素包含起来，然后在 span 元素上使用它。
像上例子中，“2025” 占据的是一个汉字的空间，此时会显得有点挤，效果并不是很理想。想要达到预期的效果，小伙伴们还是静静等待 W3C 对该属性的不断修订以及主流浏览器对其的支持了。
