# CSS如何設置文字垂直顯示
在網頁設計中，文字垂直顯示是一種常見的排版需求，尤其適用于中文豎排、側邊欄標簽或特殊設計場景。本文將詳細介紹8種實現文字垂直顯示的CSS方法，涵蓋基礎屬性、現代布局技術以及實際應用案例。
## 一、基礎屬性：writing-mode
`writing-mode` 是CSS3專為文字方向設計的屬性，支持以下值：
```css
.vertical-text {
writing-mode: vertical-rl; /* 從右到左垂直 */
writing-mode: vertical-lr; /* 從左到右垂直 */
writing-mode: sideways-rl; /* 字母也側立（部分瀏覽器支持） */
}
| 瀏覽器 | 支持版本 |
|---|---|
| Chrome | 8+ |
| Firefox | 41+ |
| Safari | 10.1+ |
| Edge | 12+ |
當需要精確控制旋轉角度時：
.rotate-90 {
transform: rotate(90deg);
transform-origin: left top; /* 旋轉基準點 */
display: inline-block;
white-space: nowrap;
}
| 方法 | 優點 | 缺點 |
|---|---|---|
| rotate(90deg) | 簡單直觀 | 需要手動調整布局 |
| rotate(-90deg) | 適合右側欄 | 文字順序可能反轉 |
現代布局方案實現垂直文字：
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
height: 200px;
}
CSS Grid提供更精確的控制：
.grid-container {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(1em, 1fr));
}
.table-method {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 1.5em;
}
針對中文排版需求：
.chinese-vertical {
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: 0.5em;
line-height: 2;
}
<nav class="vertical-nav">
<a href="#">首 頁</a>
<a href="#">產 品</a>
</nav>
.vertical-nav a {
writing-mode: vertical-rl;
padding: 1em 0.5em;
border-right: 1px solid #ddd;
}
th.vertical-header {
height: 120px;
white-space: nowrap;
transform: rotate(-90deg) translateX(-50%);
}
aria-orientation屬性<!DOCTYPE html>
<html>
<head>
<style>
.demo-container {
display: flex;
gap: 30px;
margin: 2rem auto;
max-width: 900px;
}
.method-box {
border: 1px dashed #ccc;
padding: 15px;
min-height: 150px;
}
.writing-mode-demo {
writing-mode: vertical-rl;
background: #f0f8ff;
}
.transform-demo {
transform: rotate(90deg);
background: #fff0f5;
}
</style>
</head>
<body>
<div class="demo-container">
<div class="method-box writing-mode-demo">
春眠不覺曉，處處聞啼鳥
</div>
<div class="method-box transform-demo">
夜來風雨聲，花落知多少
</div>
</div>
</body>
</html>
Q：垂直文字如何保持居中？ A：組合使用flexbox與writing-mode：
.container {
display: flex;
justify-content: center;
}
.vertical-text {
writing-mode: vertical-rl;
align-self: center;
}
Q：移動端適配注意事項 - 避免在小屏幕使用固定寬度 - 考慮使用媒體查詢切換橫豎排：
@media (max-width: 768px) {
.responsive-text {
writing-mode: horizontal-tb;
}
}
本文詳細介紹了8種CSS實現文字垂直顯示的技術方案，讀者可根據具體項目需求選擇合適的方法。建議優先考慮writing-mode方案，在需要復雜布局時結合Flexbox/Grid使用，特殊場景再考慮transform方案。實際開發中應注意瀏覽器兼容性和可訪問性要求。
“`
注：本文實際約1500字，完整版可擴展以下內容： 1. 各方法的詳細瀏覽器兼容數據 2. 更多實際應用場景代碼示例 3. 性能測試數據對比 4. 與JavaScript結合的動態方案 5. 響應式設計的詳細處理方案
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
