垂直排版在中文語境極常見，但很多開發者只知 <br> 大法。本文由淺入深介紹 7 種 CSS 方案，附代碼對比，助你選出最適合項目的那一款。

方法一：<br> 強制換行 ❌ 不推薦

<h1>N<br>E<br>T<br>T<br>U<br>T<br>S</h1>

語義破壞、維護地獄、無法響應式。僅作了解。

方法二：Span 包裹 + display:block 🛠 靜態可用

<h1><span>N</span><span>E</span>...</h1>
h1 span { display: block; }

缺點：手工包裹標籤極其繁瑣，CMS 動態內容無法適用。

方法三：JS 動態注入 Span ⚡ 進步但有風險

var h1 = document.querySelector('h1');
h1.innerHTML = '<span>' + h1.textContent.split('').join('</span><span>') + '</span>';

解決動態問題，但：JS 禁用時佈局崩壞；理想情況應由 CSS 完成佈局。

方法四：容器定寬 + word-wrap:break-word 📐 像素賭博

h1 { width: 50px; font-size: 50px; word-wrap: break-word; }

強制每字換行。風險：字號/字體變化導致寬度失效，大小寫混排更不可控（IE 下嚴重錯位）。不推薦生產環境。

方法五：大 letter-spacing 兜底 🛡 方法四補丁

h1 { width: 50px; font-size: 50px; word-wrap: break-word; letter-spacing: 20px; }

字母間距撐開寬度，減少誤換行風險。仍依賴固定像素寬度，本質未變。

方法六：em 單位 + 字間空格 ✨ 目前最佳跨瀏覽器方案

h1 { width: 1em; font-size: 40px; letter-spacing: 40px; }

<h1>N e t t u t s</h1>  /* 字母間留空格 */

優勢：1em 等於字體 x-height，隨字號自適應；大 letter-spacing 確保單字獨佔一行；純 CSS、無 JS、兼容 IE6+。

方法七：white-space:pre / pre-wrap 📝 保留原始換行

h1 { white-space: pre; font-family: monospace; }

<h1>N
E
T
T
U
T
S</h1>

適合預排版內容（代碼、詩歌），需等寬字體對齊，通用性受限。

現代最佳實踐：writing-mode

.vertical-text {
  writing-mode: vertical-rl;   /* 從右向左，自上而下 */
  text-orientation: mixed;     /* 中文直立，英文可旋轉 */
  line-height: 1.5;
}

CSS Writing Modes Level 3 已獲全主流瀏覽器支持（含移動端），這才是正統解法。配合 text-orientation: upright 可控制英文字符是否旋轉。

選型建議

場景	推薦方案
靜態標題、少量文案	方法六（em + 空格）兼容最好
動態內容、CMS 輸出	writing-mode（現代項目） / 方法六（舊項目）
代碼塊、詩歌、預排版	white-space:pre
需精確控制字符旋轉	writing-mode + text-orientation

拋棄 <br> 與 JS 依賴，擁抱 writing-mode，讓垂直排版回歸 CSS 本職工作——佈局與表現分離。