CSS中的text-combine-upright属性详解

1. 属性描述
text-combine-upright 是CSS中用于控制直立书写模式下文本组合的属性，主要解决东亚文字（如中文、日文）在垂直排版时，数字、英文单词等横向内容显示不自然的问题。例如，将"2023年"在垂直排版中显示为单个字符宽度的横向组合（如将"2023"压缩为与一个汉字等宽的区块）。

2. 语法与取值

text-combine-upright: none | all | [ digits <integer>? ];

• none（默认）：禁用文本组合，所有字符独立垂直排列。
• all：将元素内所有文本水平组合，压缩到单个字符宽度内（适用于短文本如日期）。
• digits ?：仅组合连续数字，可指定数字位数（如 digits 4 表示组合最多4位数字）。

3. 使用场景与示例
步骤1：启用垂直书写模式
需先设置垂直排版环境（如 writing-mode: vertical-rl）：

.vertical-text {
  writing-mode: vertical-rl; /* 从右到左垂直排列 */
  height: 200px;
  border: 1px solid #ccc;
}

步骤2：应用文本组合
对需要横向压缩的文本元素添加组合属性：

<div class="vertical-text">
  <p>二零<span class="combine">2023</span>年九月</p>
</div>

.combine {
  text-combine-upright: all; /* 将"2023"水平压缩 */
}

效果：数字"2023"会以横向缩略形式显示在一个字符宽度内，其余文本保持垂直排列。

4. 浏览器兼容性注意事项

• 需前缀支持：部分旧版本浏览器需使用 -webkit-text-combine 或 -ms-text-combine。
• 数字位数限制：digits 值需谨慎使用，避免过长数字导致显示异常。

5. 进阶技巧

• 与 text-orientation 配合：可调整组合文本的旋转方向（如 text-orientation: mixed 保持数字直立）。
• 响应式适配：通过媒体查询在横竖屏切换时调整组合策略。