text-combine-upright
text-combine-upright 是一个 CSS 属性，用于设置字符组合，使其占据单个字符的空间。如果组合文本的宽度超过 1em，用户代理必须将内容限制在 1em 内。生成的组合在布局和装饰方面被视为一个单独的直立字形。此属性仅在垂直书写模式下有效。
它用于实现日语中的“纵中横”（tate-chū-yoko 縦中横
），或中文中的“横向文字”（橫向文字
）的效果。
试一试
text-combine-upright: none;
text-combine-upright: all;
<section class="default-example" id="default-example">
<div>
<p>
<span class="transition-all" id="example-element"
>2022<span>年</span>12<span>月</span>8</span
>日から楽しい
</p>
</div>
</section>
p {
writing-mode: vertical-rl;
}
语法
css
/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;
/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;
值
正式定义
正式语法
text-combine-upright =
none |
all |
[ digits <integer [2,4]>? ]
示例
在水平文本中使用 'all'
所有值都需要在每段水平文本周围进行标记，但目前它比数字值得到更多浏览器的支持。
HTML
html
<p lang="zh-Hant">
民國<span class="num">105</span>年<span class="num">4</span>月<span
class="num"
>29</span
>日
</p>
CSS
css
html {
writing-mode: vertical-rl;
font: 24px serif;
}
.num {
text-combine-upright: all;
}
结果
规范
| 规范 |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |
浏览器兼容性
加载中…