> ## Content Index
> Fetch the complete content index at: https://blog.anthea.day/llms.txt
> Use this file to discover other available public pages before exploring further.

# 垂直文字的處理：writing-mode 文字排版
- URL: https://blog.anthea.day/css-vertical-text/
- Published: 2025-09-08T13:20:58.000Z
- Updated: 2026-11-07T20:07:41.000Z
- Author: Anthea / 芫荽
- Tags: #Migrated-1792241843742, #Import 2026-10-17 12:57, Coding

想像一下，你正在逛台北的誠品書店，突然被一本日式設計的書籍封面吸引住了。書名不是我們習慣的橫排文字，而是優雅地垂直排列，彷彿每個字都在向下流淌，形成一道獨特的視覺瀑布。這種垂直文字的美感，不僅在傳統的東方文化中常見，在現代網頁設計中也越來越受歡迎。

無論是製作一個復古風格的網站標題，還是設計一個創意十足的側邊導航欄，都少不了垂直文字的貢獻。但是，以下面這行文字為例，該如何在 CSS 中實現這個效果呢？

![](https://blog.anthea.day/content/images/2026/10/1-rmkorafeejbxlcpznk3flq.png)

### 最簡單的方法：使用 rotate 旋轉

最直觀的想法就是使用 CSS 的 `transform: rotate()` 來旋轉文字：

```css
.vertical-text-rotate { 
    transform: rotate(90deg); 
    /* 或者 rotate(-90deg) 根據需要的方向 */ 
}
```

這個方法看起來很簡單，文字確實會垂直顯示。對於簡單的場景，這個解決方案可能就足夠了。但我們在套用後，可能會遇到一些問題。

![](https://blog.anthea.day/content/images/2026/10/1-mw6giqi2lztmmcjupby4uq-2x.png)

1. **佔用空間混亂**：旋轉後的元素仍然保持原本的寬高比例，這會導致佈局空間計算錯誤。原本應該是細長的垂直文字區塊，卻佔用了一個正方形或橫向矩形的空間。調整寬度的話，在收縮展開的設計中，橫版的排版又可能會變形。
2. **定位偏移**：文字旋轉後，其基準點（通常是中心點）會發生位移，導致文字出現在你意想不到的位置。你需要額外使用 `transform-origin` 和位置調整來修正。
3. **容器適應困難**：父容器很難根據旋轉後的文字自動調整大小，經常需要手動設定寬度和高度，這讓響應式設計變得複雜。
4. **文字方向不自然**：最重要的是，`rotate` 只是把橫排文字整體旋轉了 90 度，但每個字元本身並沒有按照垂直文字的規範來排列。在中文或日文的傳統垂直排版中，某些字元（如標點符號）應該有特定的顯示方式，但 `rotate` 無法處理這些細節。

### 更優雅的方案：writing-mode

CSS 提供了一個更專業的屬性來處理垂直文字：`writing-mode`

```css
.vertical-text-writing-mode { 
    writing-mode: vertical-rl; /* 垂直方向，從右到左 */ 
    /* 或者 */ 
    writing-mode: vertical-lr; /* 垂直方向，從左到右 */ 
}
```

1. **自然的文字流向**：`writing-mode` 是專門為處理文字書寫方向而設計的，它會讓文字按照正確的垂直排版規範顯示，包括標點符號的正確位置。
2. **準確的空間佔用**：使用 `writing-mode` 後，元素會按照實際的文字排列方式佔用空間，不會出現 `rotate` 那樣的空間計算問題。
3. **更好的響應式支援**：容器可以根據垂直文字的實際尺寸自動調整，讓響應式設計更加簡單。
4. **語義化更強**：從語義角度來說，`writing-mode` 更清楚地表達了「這是垂直文字」的意圖，而不是「這是旋轉的橫向文字」。

![](https://blog.anthea.day/content/images/2026/10/1-xi0gdmvu_oq76rugeseheg.png)

### 總結

雖然 `transform: rotate()` 看起來是個快速的解決方案，但對於真正的垂直文字需求，`writing-mode` 才是正確的選擇。它不僅解決了佈局和定位的技術問題，更重要的是提供了符合文字排版傳統的顯示效果。

下次當你需要實現垂直文字時，不妨試試這個更專業的方法，讓你的網頁文字像書店裡那些優雅的書籍封面一樣，散發出獨特的魅力。

以上就是今天的分享，我們下次見 👋