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 |
瀏覽器相容性
載入中…