【CSS】text-combine-upright - １文字幅のテキスト

CSSのtext-combine-uprightプロパティについて解説します。

検証環境

CSS

macOS

14.1

text-combine-upright

text-combine-uprightは“１文字幅にテキストを並べるかどうか”のプロパティです。

writing-modeプロパティがvertical-rlまたはvertical-lrの場合に使用します。

基本構文

text-combine-upright: 値;

値

代表的な値は次の通りです。

値	説明
none	設定なし
all	水平に並べる

サンプル

日付の数字を１文字幅の横並びに表示するサンプルです。

sample.html

<style>
p {
    font-size: 1.5em;
    writing-mode: vertical-rl;
}
span {
    ___ih_hl_start
    text-combine-upright: all;
    ___ih_hl_end
}
</style>
 
<p><span>2024</span>年<span>1</span>月<span>20</span>日</p>

プレビュー