文字空白、定義 Tab 大小

網頁顯示文字時，預設會將連續的多個空白合併為單一空白，如果要顯示連續空白或使用 tab 定位，就必須使用 CSS 的樣式屬性進行設定，這篇教學會介紹 CSS 的 white-space 和 tab-size 樣式，運用這些樣式屬性，設定文字空白、文件裡的 Enter 換行以及 Tab 大小。

快速導覽：

• white-space 處理空白
• white-space-collapse 處理連續空白
• tab-size 定義 Tab 大小

white-space 處理空白

white-space 樣式屬性可以設定「處理文字間的空白以及軟換行行為」，具有繼承特性，當有遇到需要顯示空白的狀況，或需要使用 pre 元素的顯示行為，就必須使用這個樣式屬性，下方列出相關屬性值：

• 硬換行：遇到換行字元或 <br/> 元素而強制換行。
• 軟換行：當文字長度超過單行長度而自動換行，可以透過 CSS 樣式屬性控制換行行為。

下方範例先設定 line-break:anywhere;，強制文字只要超過範圍就換行 ( 參考「文字換行」)，接著使用不同的 white-space 呈現不同的連續空白和換行顯示模式。

線上展示：https://codepen.io/oxxo/pen/dyEZXQZ

<!-- 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 )，具有繼承特性，下方列出相關屬性值：

下方飯會展示五種不同屬性值，當文字中有連續空白遇到換行的呈現方式：

線上展示：https://codepen.io/oxxo/pen/qEWWvJZ

<!-- 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;。

線上展示：https://codepen.io/oxxo/pen/mdYqrNd

<!-- HTML 程式碼 --> 
<pre class="a">&#0009;<-- 這邊有一個 Tab</pre>
<pre class="b">&#0009;<-- 這邊有一個 Tab</pre>
<pre class="c">&#0009;<-- 這邊有一個 Tab</pre>
<pre class="d">&#0009;<-- 這邊有一個 Tab</pre>
<div class="a">&#0009;<-- 這邊有一個 Tab</div>
<div class="b">&#0009;<-- 這邊有一個 Tab</div>
<div class="c">&#0009;<-- 這邊有一個 Tab</div>
<div class="d">&#0009;<-- 這邊有一個 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>

小結

這篇教學所介紹的兩個樣式屬性，white-space 是比較常使用的樣式，除了可以控制文字顯示連續空白的行為，也可以讓文字強制不換行，是相當方便又常見的樣式屬性。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～