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>