CSS 定義文字空白、定義 Tab 大小
網頁顯示文字時，預設會將連續的多個空白合併為單一空白，如果要顯示連續空白或使用 tab 定位，甚至是設定「強制不換行」的效果，就必須使用 CSS 的樣式屬性進行設定，這篇教學會介紹 CSS 的 white-space 和 tab-size 樣式，運用這些樣式屬性，設定文字空白、文件裡的 Enter 換行以及 Tab 大小，最後還會介紹兩個常用的「空白」HTML 字元符號。
快速導覽：
教學影片
搭配教學影片一起閱讀，效果會更好！歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。
white-space 處理空白
white-space 樣式屬性可以設定「處理文字間的空白以及軟換行行為」，具有繼承特性，當有遇到需要顯示空白的狀況，或需要使用 pre 元素的顯示行為，就必須使用這個樣式屬性，下方列出相關屬性值：
| 屬性數值 | 連續空白 | 硬換行 | 軟換行 | 說明 |
|---|---|---|---|---|
| normal | X 合併 | O 保留 | O 保留 | 預設值 |
| nowrap | X 合併 | O 保留 | X 無效 | 強制不換行 |
| pre | O 保留 | O 保留 | X 無效 | 使用 pre 顯示行為 |
| pre-wrap | O 保留 | O 保留 | O 保留 | 使用 pre 顯示行為 |
| pre-line | X 合併 | O 保留 | O 保留 | 使用 pre 顯示行為 |
下方範例先設定 line-break:anywhere;，強制文字只要超過範圍就換行 ( 參考「文字換行」)，接著使用不同的 white-space 呈現不同的連續空白和換行顯示模式。
<!-- HTML 程式碼 -->
<div class="a">
The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.
<br/>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
大家好我是 OXXO，遇到連續空白 會怎麼處理呢？
接下來的這段文字是使用 enter 鍵換行的。
</div>
<div class="b">
The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.
<br/>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
大家好我是 OXXO，遇到連續空白 會怎麼處理呢？
接下來的這段文字是使用 enter 鍵換行的。
</div>
<div class="c">
The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.
<br/>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
大家好我是 OXXO，遇到連續空白 會怎麼處理呢？
接下來的這段文字是使用 enter 鍵換行的。
</div>
<div class="d">
The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.
<br/>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
大家好我是 OXXO，遇到連續空白 會怎麼處理呢？
接下來的這段文字是使用 enter 鍵換行的。
</div>
<div class="e">
The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.
<br/>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
大家好我是 OXXO，遇到連續空白 會怎麼處理呢？
接下來的這段文字是使用 enter 鍵換行的。
</div>
<!-- CSS 程式碼 -->
<style>
div {
border: 2px solid #000;
width: 400px;
margin: 10px;
padding: 10px;
line-break: anywhere; /* 強制換行 */
}
.a {white-space: normal;}
.b {white-space: nowrap;}
.c {white-space: pre;}
.d {white-space: pre-wrap;}
.e {white-space: pre-line;}
</style>
white-space-collapse 連續空白遇到換行的處理方式
white-space-collapse 可以「連續空白」與到「軟換行」的處理方式 ( 類似 white-space )，具有繼承特性，下方列出相關屬性值：
| 屬性值 | 連續空白 | 連續空白換行 | 程式碼中手動換行 | 備註 |
|---|---|---|---|---|
| collapse | X 合併 | - | X 移除 | - |
| preserve | O 保留 | X 不換行 | O 保留 | - |
| preserve-breaks | X 合併 | - | O 保留 | - |
| preserve-spaces | O 保留 | X 不換行 | O 保留 | 大多數瀏覽器不支援，呈現 collapse 行為。 |
| break-spaces | O 保留 | O 換行 | O 保留 | - |
下方飯會展示五種不同屬性值，當文字中有連續空白遇到換行的呈現方式：
<!-- HTML 程式碼 -->
<div> STEAM 教育學習 網秉持著 STEAM / STEM 的精神，
透過一系列 免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div> STEAM 教育學習 網秉持著 STEAM / STEM 的精神，
透過一系列 免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div> STEAM 教育學習 網秉持著 STEAM / STEM 的精神，
透過一系列 免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div> STEAM 教育學習 網秉持著 STEAM / STEM 的精神，
透過一系列 免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div> STEAM 教育學習 網秉持著 STEAM / STEM 的精神，
透過一系列 免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 300px;
border: 1px solid #000;
margin: 10px;
}
div:nth-of-type(1) {white-space-collapse: collapse;}
div:nth-of-type(2) {white-space-collapse: preserve;}
div:nth-of-type(3) {white-space-collapse: preserve-breaks;}
div:nth-of-type(4) {white-space-collapse: preserve-spaces;}
div:nth-of-type(5) {white-space-collapse: break-spaces;}
</style>
tab-size 定義 Tab 大小
tab-size 樣式屬性可以定義「Tab 大小」，具有繼承特性，tab 表示在 HTML 使用「	」字元的空白，瀏覽器預設行為中，所有的 tab 會被視為「8 個空白」，tab-size 可以指定「幾個空白」，或每個 tab 元素為「多少 px 的空白」，使用時需要注意，因為 tab 為「連續空白」，除了 pre 元素，其他元素必須搭配 white-space:pre; 或 white-space:pre-wrap;。
<!-- HTML 程式碼 -->
<pre class="a">	<-- 這邊有一個 Tab</pre>
<pre class="b">	<-- 這邊有一個 Tab</pre>
<pre class="c">	<-- 這邊有一個 Tab</pre>
<pre class="d">	<-- 這邊有一個 Tab</pre>
<div class="a">	<-- 這邊有一個 Tab</div>
<div class="b">	<-- 這邊有一個 Tab</div>
<div class="c">	<-- 這邊有一個 Tab</div>
<div class="d">	<-- 這邊有一個 Tab</div>
<!-- CSS 程式碼 -->
<style>
pre, div{
border: 2px solid #000;
width: 400px;
margin: 2px 10px 10px;
padding: 10px;
}
div {white-space: pre;} /* div 要設定 white-space: pre */
.a {tab-size: 5;} /* tab = 5 個空白 */
.b {tab-size: 10;} /* tab = 10 個空白 */
.c {tab-size: 20;} /* tab = 20 個空白 */
.d {ab-size: 200px;} /* tab = 200px */
</style>
HTML 中放入空白的方式
由於 HTML 裡的「空白」會根據樣式的不同而有不同的表現，如果要產生「不受樣式影響」的空白，可透過「特殊字元組合」來表現空白，下方列出一些常見的空白特殊字元組合：
| 空白字元組合 | 效果 |
|---|---|
|
等同按空白鍵產生的空白 ( 最常用 ) |
  |
全形空白，等於三個 |
下方的範例雖然有設定「合併空白」，但由於空白是透過特殊字元組合產生，意義上來說等同於某個字，就不會被 white-space-collapse 樣式影響。
<!-- HTML 程式碼 -->
空白合併
<div class="a"> STEAM 教育學習 網秉持著 STEAM / STEM 的精神，
透過一系列 免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
半形空白字元不合併
<div class="b"> STEAM 教育學習 網秉持著 STEAM / STEM 的精神，
透過一系列 免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
全形空白字元不合併
<div class="c">  STEAM 教育學習  網秉持著  STEAM / STEM 的精神，
透過一系列 免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<!-- CSS 程式碼 -->
<style>
div {
border: 2px solid #000;
width: 60%;
margin: 10px;
font-size: 13px;
white-space-collapse: preserve-breaks;
}
</style>
小結
這篇教學所介紹的兩個樣式屬性，white-space 是比較常使用的樣式，除了可以控制文字顯示連續空白的行為，也可以讓文字強制不換行，是相當方便又常見的樣式屬性。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～