CSS - text-combine-upright 属性_CSS 菜鸟教程

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>

<< CSS - text-align-last 属性 CSS - text-emphasis 属性 >>