文字空白与 Tab 大小

网页显示文字时，默认会将连续的多个空白合并为单一空白，如果要显示连续空白或使用 tab 定位，甚至是设定“强制不换行”的效果，就必须使用 CSS 的样式属性进行设定，这篇教学会介绍 CSS 的 white-space 和 tab-size 样式，运用这些样式属性，设定文字空白、文件里的 Enter 换行以及 Tab 大小，最后还会介绍两个常用的“空白”HTML 字元符号。

快速导览：

• white-space 处理空白
• white-space-collapse 连续空白遇到换行的处理方式
• tab-size 定义 Tab 大小
• HTML 中放入空白的方式

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

white-space 处理空白

white-space 样式属性可以设定“处理文字间的空白以及软换行行为”，具有继承特性，当有遇到需要显示空白的状况，或需要使用 pre 元素的显示行为，就必须使用这个样式属性，下方列出相关属性值：

• 由于 white-space 会涉及换行行为，可由“CSS 文字换行”了解更多换行行为与样式。
• pre 预先格式化元素 ( preformatted text ) 可以保留原始文字内容格式，不论是空白或换行都会被保留，加上默认等宽字的属性，通常都是作为程序码的显示使用，参考“预先格式化 pre”。

下方范例先设定 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>

HTML 中放入空白的方式

由于 HTML 里的“空白”会根据样式的不同而有不同的表现，如果要产生“不受样式影响”的空白，可透过“特殊字元组合”来表现空白，下方列出一些常见的空白特殊字元组合：

下方的范例虽然有设定“合并空白”，但由于空白是透过特殊字元组合产生，意义上来说等同于某个字，就不会被 white-space-collapse 样式影响。

线上展示：https://codepen.io/oxxo/pen/raVPwoe

<!-- HTML 程式碼 --> 
空白合併
<div class="a">      STEAM 教育學習      網秉持著      STEAM / STEM   的精神，              
透過一系列       免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。     </div>
半形空白字元不合併
<div class="b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STEAM 教育學習&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;網秉持著&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STEAM / STEM&nbsp;&nbsp;&nbsp;的精神，              
透過一系列&nbsp;&nbsp;&nbsp;免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。&nbsp;&nbsp;</div>
全形空白字元不合併
<div class="c">&emsp;&emsp;STEAM 教育學習&emsp;&emsp;網秉持著&emsp;&emsp;STEAM / STEM&emsp;的精神，              
透過一系列&emsp;免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。&emsp;</div>


<!-- CSS 程式碼 -->
<style>
  div {
    border: 2px solid #000;
    width: 60%;
    margin: 10px;
    font-size: 13px;
    white-space-collapse: preserve-breaks;
  }
</style>

小结

这篇教学所介绍的两个样式属性，white-space 是比较常使用的样式，除了可以控制文字显示连续空白的行为，也可以让文字强制不换行，是相当方便又常见的样式属性。

意见反馈