caniuse 站台中說明 CSS writing-mode 屬性設定,以古老的 IE 來說,由 6 版之後基本上是可有條件使用。

下面,主要是呈現 writing-mode 屬性設定設定後,於外層容器的關係。

See the Pen CSS writing-mode 文字垂直走向 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

writing-mode 使用 vertical-rlvertical-lr 會將容器本身處理成單行,而寬度會縮成最小寬度。
父層容器如果沒有定義高度,會直接一單行呈現,但如果有定義高度會於文字字元本身在高度做換行的動作,例中是直接段唐詩 6 個字元,分別以 rem 對應單一字元為高度,就會正好於每個標點符號斷行。

目前為止,有下 vertical-rlvertical-lr 設定,但確看不出走文的差別。

See the Pen CSS writing-mode 文字垂直走向–於容器內預設呈現方式 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

透過寬度下 100% 才可以呈現出走文的方式,主要是由左至右或是由右至左的走文方式。

透過高度來自適應斷行。

See the Pen CSS writing-mode 文字垂直走向–vertical-rl 與 vertical-lr 容器內走文差別 by Jimmy_Wu (@Jimmy_Wu) on CodePen.


資料來源

符號工作站 – 關於網頁直行顯示的進一步資訊
改變CSS世界縱橫規則的writing-mode屬性
My Program :: 略縮語(ellipsis)的html特殊字元與直排走文