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>

列印頁面