css 垂直寫法技巧

說明

分享 css 實現垂直寫法

預覽

程式碼

html

<div class="text">
  民國
  <span class="number">100</span>
  年
  <span class="number">1</span>
  月
  <span class="number">1</span>
  日
  <br>
  高雄發大財
</div>

css

.number {
  text-combine-upright: all;
}

.text {
  writing-mode: vertical-lr;
}

writing-mode: vertical-lr 設定文本垂直由左而右排版

text-combine-upright: all 設定文本水平排版