CSS - text-combine-upright 属性

text-combine-upright 属性指定将多个排版字符单元组合到单个排版字符单元的空间中。此属性基本上可用于日语、中文等垂直书写。

此属性仅在垂直书写模式下有效。我们可以将text-combine-upright与writing-mode属性结合使用，以指定多个字符如何适应单个空间。

可能的值

none：文本没有特殊处理。
all：尝试将框内所有连续字符水平排版。这确保文本占据框垂直线内单个字符的空间。
end：如果direction为ltr，则右对齐；如果direction为rtl，则左对齐。
digits<integer>：目前不受任何浏览器支持。

应用于

所有 HTML 元素，但表格行组、行、列组和列除外。

DOM 语法

object.style.textCombineUpright = "all";

CSS text-combine-upright - 基本示例

以下示例演示如何使用text-combine-upright属性

<html>
<head>
<style>
   p {
      writing-mode: vertical-rl;
      font: 24px serif;
   }
   .num {
      text-combine-upright: all;
   }
   .num1 {
      text-combine-upright: none;
   }
</style>
</head>
<body>
   <h2>With text-combine-upright  set to all</h2>
   <p>
      民國<span class="num">2023</span>年<span class="num">8</span>月<span
      class="num"
      >30</span
      >日
   </p>
   <h2>With text-combine-upright  set to none</h2>
   <p>
      民國<span class="num1">2023</span>年<span class="num1">8</span>月<span
      class="num1"
      >30</span
      >日
   </p>
</body>
</html>

打印页面