CSS - text-combine-upright 属性



CSS text-combine-upright 属性指定将多个版式字符单元组合到单个版式字符单元的空间中。这个属性基本上可以用于垂直写作,如日语、中文。

此属性仅在垂直写入模式下有效。我们可以将 text-combine-uprightwriting-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>