🤔 遇到的問題
❌ 問題現象
當我們在 HTML 裡寫了這樣的程式碼：
<div class="code-box">
<h1>這是大標題</h1>
<p>這是一段文字</p>
<img src="cat.jpg" />
</div>
期望顯示：每個標籤各佔一行，整齊排列
實際顯示：全部擠成一行 😱
<h1>這是大標題</h1> <p>這是一段文字</p> <img src="cat.jpg" />
🔍 為什麼會這樣？
HTML 的預設行為：
- 把所有的「換行」當成「一個空格」
- 把多個「連續空格」當成「一個空格」
- 自動忽略多餘的空白
這在一般網頁內容很好用，但對於「程式碼區塊」就會出問題！
✅ 解決方法：white-space 屬性
💡 什麼是 white-space？
white-space 是一個 CSS 屬性，用來控制「空白字元（空格、換行、Tab）」要怎麼處理。
.code-box {
white-space: pre-wrap; /* 加上這行就解決了！ */
}
📊 white-space 的五個選項
| 屬性值 | 保留換行 | 保留空格 | 自動換行 | 適合用途 |
|---|---|---|---|---|
normal |
❌ | ❌ | ✅ | 一般文字（預設值） |
nowrap |
❌ | ❌ | ❌ | 強制不換行 |
pre |
✅ | ✅ | ❌ | 純文字檔案 |
pre-wrap |
✅ | ✅ | ✅ | 程式碼區塊 ⭐ |
pre-line |
✅ | ❌ | ✅ | 詩詞、地址 |
💡 推薦使用
pre-wrap：
- ✅ 保留所有換行和空格（程式碼格式不會跑掉）
- ✅ 遇到容器邊界會自動換行（不會跑出螢幕）
- ✅ 最適合顯示程式碼！
🎮 互動示範：看看差異
下面是同樣的 HTML 程式碼，用不同的 white-space 設定：
❌ normal（預設值）- 會擠成一行
<h1>這是大標題</h1>
<p>這是一段文字</p>
<img src="cat.jpg" />
⚠️ pre - 會保留格式，但太長會跑出去
<h1>這是大標題</h1>
<p>這是一段文字</p>
<img src="cat.jpg" />
✅ pre-wrap - 完美！既保留格式，又會自動換行
<h1>這是大標題</h1>
<p>這是一段文字</p>
<img src="cat.jpg" />
⚡ pre-line - 保留換行，但不保留空格
<h1>這是大標題</h1>
<p>這是一段文字</p>
<img src="cat.jpg" />
📝 實際應用範例
範例 1：程式碼區塊（推薦用 pre-wrap）
/* CSS */
.code-box {
background: #2d3748;
color: #68d391;
padding: 20px;
border-radius: 10px;
font-family: monospace;
white-space: pre-wrap; /* 關鍵！ */
}
/* HTML */
<div class="code-box">
<h1>標題</h1>
<p>段落</p>
</div>
範例 2：詩詞排版（可用 pre-line）
床前明月光
疑是地上霜
舉頭望明月
低頭思故鄉
範例 3：地址排版（可用 pre-line）
收件人：王小明
地址：台北市信義區信義路五段7號
電話：02-1234-5678
🎯 快速決策表
我應該用哪個 white-space？
-
🖥️ 要顯示程式碼？
→ 用white-space: pre-wrap; -
📜 要顯示詩詞、地址？
→ 用white-space: pre-line; -
📄 一般網頁文字？
→ 用預設的white-space: normal;（不用特別寫） -
🚫 強制文字不換行？
→ 用white-space: nowrap;
💡 常見問題
Q1：為什麼不直接用 <pre> 標籤？
A：<pre> 標籤的預設樣式是 white-space: pre;，不會自動換行，在手機上可能會跑出螢幕。用 CSS 設定 white-space: pre-wrap; 更靈活！
Q2：pre-wrap 和 pre 差在哪？
A：
pre：不會自動換行，內容太長會跑出容器pre-wrap：會自動換行，內容不會跑出容器 ✅
Q3：為什麼我的程式碼縮排不見了？
A：檢查是不是用了 pre-line（不保留空格）或 normal（不保留空格和換行）。要保留縮排，請用 pre-wrap！
🏆 總結
記住這三點：
- HTML 預設會把換行當成空格，所以程式碼會擠成一行
- 用 CSS 的
white-space屬性可以改變這個行為 - 顯示程式碼時，用
white-space: pre-wrap;最適合
完整的程式碼區塊 CSS 範例
.code-box {
background: #2d3748; /* 深色背景 */
color: #68d391; /* 綠色文字 */
padding: 20px; /* 內距 */
border-radius: 10px; /* 圓角 */
font-family: monospace; /* 等寬字體 */
font-size: 0.95em; /* 字體大小 */
line-height: 1.6; /* 行高 */
overflow-x: auto; /* 橫向捲軸 */
white-space: pre-wrap; /* 保留格式 + 自動換行 ⭐ */
}