CSS 属性

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

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

属性值

  • none:没有对文本进行特殊处理。

  • all:尝试水平排版框中的所有连续字符。这可确保文本占据框垂直线内单个字符的空间。

  • end:如果方向为 ltr，则右对齐；如果方向为左对齐是 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>