Skip to main content

什麼是空白字元？

在 HTML 和 CSS 中，空白字元指的是空格、換行、製表符（Tab）等不可見字符。這些字元可能會影響元素的排版，例如多個連續空格在 HTML 中預設會被壓縮為單一空格，或者換行可能導致不預期的間距。CSS 提供了幾個屬性來控制空白字元的處理方式，主要包括：

  1. white-space: 控制文字如何處理空白、換行和自動換行。

  2. word-break: 控制單詞斷行行為。

  3. overflow-wrap（舊稱 word-wrap）: 控制長單詞或連續字串是否換行。

  4. text-overflow: 處理文字溢出時的顯示方式，通常與 white-space 搭配使用。

以下我會逐一說明這些屬性，並提供範例讓你實際操作。

1. white-space 屬性​

white-space 是控制空白字元和換行行為的核心屬性。它決定了文字中的空格、換行和自動換行如何呈現。

常用值：​

  • normal: 預設值，連續的空白字元會被壓縮為單一空格，文字會根據容器寬度自動換行。

  • nowrap: 連續的空白字元會被壓縮，且文字不會自動換行，除非遇到 <br>。

  • pre: 保留所有空白字元和換行，類似 <pre> 標籤的效果。

  • pre-wrap: 保留空白字元和換行，但會根據容器寬度自動換行。

  • pre-line: 連續的空白字元會被壓縮，但保留換行，且會根據容器寬度自動換行。

範例：white-space 的應用​

假設你有一段文字，包含多個空格和換行，想看看不同 white-space 值的效果。

HTML​
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>空白字元處理範例</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>測試 CSS 空白字元處理</h1>
    <div class="container">
      <h2>white-space: normal</h2>
      <div class="box normal">
        這是一段文字 包含多個空格 和換行 看看效果如何
      </div>

      <h2>white-space: nowrap</h2>
      <div class="box nowrap">
        這是一段文字 包含多個空格 和換行 看看效果如何
      </div>

      <h2>white-space: pre</h2>
      <div class="box pre">這是一段文字 包含多個空格 和換行 看看效果如何</div>

      <h2>white-space: pre-wrap</h2>
      <div class="box pre-wrap">
        這是一段文字 包含多個空格 和換行 看看效果如何
      </div>

      <h2>white-space: pre-line</h2>
      <div class="box pre-line">
        這是一段文字 包含多個空格 和換行 看看效果如何
      </div>
    </div>
  </body>
</html>
CSS (styles.css)​
.container {
  width: 300px;
  margin: 20px auto;
}

.box {
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

.normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}

.pre-line {
  white-space: pre-line;
}
操作步驟：​

  1. 建立一個新資料夾，例如 css-whitespace-demo。

  2. 在資料夾中建立 index.html 和 styles.css 兩個檔案。

  3. 將上面的 HTML 程式碼複製到 index.html。

  4. 將上面的 CSS 程式碼複製到 styles.css。

  5. 使用瀏覽器（例如 Chrome）開啟 index.html，觀察每個 .box 的文字顯示效果。

效果說明：​

  • normal: 多個空格被壓縮為一個，換行被忽略，文字根據容器寬度自動換行。

  • nowrap: 多個空格被壓縮，換行被忽略，文字不會自動換行，全部擠在一行。

  • pre: 保留所有空格和換行，文字完全按照原始格式顯示，不會自動換行。

  • pre-wrap: 保留空格和換行，但如果文字超出容器寬度，會自動換行。

  • pre-line: 空格被壓縮，但換行保留，文字會根據容器寬度自動換行。

2. word-break 屬性​

word-break 控制單詞或連續字串在斷行時的行為，特別適用於長單詞或無空格的語言（如中文）。

常用值：​

  • normal: 預設值，根據語言規則斷行（中文通常在任意字元斷行，英文在空格處斷行）。

  • break-all: 允許在任意字元間斷行，適用於長單詞或無空格的文字。

  • keep-all: 禁止在中文、日文、韓文等 CJK 文字間斷行，保持單詞完整。

範例：word-break 的應用​

假設你有一段很長的英文單詞或中文連續文字，想控制它如何斷行。

HTML​
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>word-break 範例</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>測試 CSS word-break</h1>
    <div class="container">
      <h2>word-break: normal</h2>
      <div class="box normal">
        這是一段很長的文字沒有空格喔 Supercalifragilisticexpialidocious
      </div>

      <h2>word-break: break-all</h2>
      <div class="box break-all">
        這是一段很長的文字沒有空格喔 Supercalifragilisticexpialidocious
      </div>

      <h2>word-break: keep-all</h2>
      <div class="box keep-all">
        這是一段很長的文字沒有空格喔 Supercalifragilisticexpialidocious
      </div>
    </div>
  </body>
</html>
CSS (styles.css)​
.container {
  width: 200px;
  margin: 20px auto;
}

.box {
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

.normal {
  word-break: normal;
}

.break-all {
  word-break: break-all;
}

.keep-all {
  word-break: keep-all;
}
操作步驟：​

  1. 建立新資料夾，例如 word-break-demo。

  2. 建立 index.html 和 styles.css 檔案。

  3. 複製上面的 HTML 和 CSS 程式碼。

  4. 使用瀏覽器開啟 index.html，觀察斷行效果。

效果說明：​

  • normal: 英文長單詞不會斷開，中文會在任意字元斷行。

  • break-all: 英文和中文都會在任意字元處斷行，確保不溢出容器。

  • keep-all: 中文保持單詞完整（不隨意斷行），英文仍可能在空格處斷行。

3. overflow-wrap（或 word-wrap）屬性​

overflow-wrap 控制長單詞或連續字串是否在容器邊界處換行，適用於避免文字溢出。

常用值：​

  • normal: 預設值，單詞不會斷開，可能導致溢出。

  • break-word: 如果單詞過長，會在容器邊界處斷行。

  • anywhere: 允許在任意位置斷行，類似 word-break: break-all。

範例：overflow-wrap 的應用​

假設你有一個很窄的容器，裡面有長單詞，想避免溢出。

HTML​
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>overflow-wrap 範例</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>測試 CSS overflow-wrap</h1>
    <div class="container">
      <h2>overflow-wrap: normal</h2>
      <div class="box normal">Supercalifragilisticexpialidocious</div>

      <h2>overflow-wrap: break-word</h2>
      <div class="box break-word">Supercalifragilisticexpialidocious</div>

      <h2>overflow-wrap: anywhere</h2>
      <div class="box anywhere">Supercalifragilisticexpialidocious</div>
    </div>
  </body>
</html>
CSS (styles.css)​
.container {
  width: 150px;
  margin: 20px auto;
}

.box {
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

.normal {
  overflow-wrap: normal;
}

.break-word {
  overflow-wrap: break-word;
}

.anywhere {
  overflow-wrap: anywhere;
}
操作步驟：​

  1. 建立新資料夾，例如 overflow-wrap-demo。

  2. 建立 index.html 和 styles.css 檔案。

  3. 複製上面的程式碼。

  4. 用瀏覽器開啟 index.html，觀察斷行效果。

效果說明：​

  • normal: 長單詞不斷行，可能溢出容器。

  • break-word: 長單詞在容器邊界處斷行，避免溢出。

  • anywhere: 類似 break-word，但更靈活，允許在任意位置斷行。

4. text-overflow 屬性​

text-overflow 通常與 white-space: nowrap 搭配使用，處理文字溢出時的顯示方式，例如顯示省略號。

常用值：​

  • clip: 直接裁切溢出的文字。

  • ellipsis: 用省略號（...）表示溢出的文字。

範例：text-overflow 的應用​

假設你有一個固定寬度的容器，文字超出時顯示省略號。

HTML​
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>text-overflow 範例</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>測試 CSS text-overflow</h1>
    <div class="container">
      <h2>text-overflow: clip</h2>
      <div class="box clip">這是一段很長的文字，會被裁切掉</div>

      <h2>text-overflow: ellipsis</h2>
      <div class="box ellipsis">這是一段很長的文字，會顯示省略號</div>
    </div>
  </body>
</html>
CSS (styles.css)​
.container {
  width: 200px;
  margin: 20px auto;
}

.box {
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
  white-space: nowrap; /* 必須設置 nowrap */
  overflow: hidden; /* 隱藏溢出部分 */
}

.clip {
  text-overflow: clip;
}

.ellipsis {
  text-overflow: ellipsis;
}
操作步驟：​

  1. 建立新資料夾，例如 text-overflow-demo。

  2. 建立 index.html 和 styles.css 檔案。

  3. 複製上面的程式碼。

  4. 用瀏覽器開啟 index.html，觀察溢出效果。

效果說明：​

  • clip: 溢出的文字被直接裁切，不顯示任何標記。

  • ellipsis: 溢出的文字以省略號（...）表示，適合用於顯示部分內容。

結合 JavaScript 動態控制空白字元​

如果你想讓使用者動態切換 white-space 的效果，可以使用 JavaScript 來實現。以下是一個簡單的範例，讓使用者點擊按鈕來改變 white-space 屬性。

HTML​
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>動態切換 white-space</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>動態切換 CSS white-space</h1>
    <div class="container">
      <div class="box" id="textBox">
        這是一段文字 包含多個空格 和換行 看看效果如何
      </div>
      <div class="controls">
        <button onclick="changeWhiteSpace('normal')">normal</button>
        <button onclick="changeWhiteSpace('nowrap')">nowrap</button>
        <button onclick="changeWhiteSpace('pre')">pre</button>
        <button onclick="changeWhiteSpace('pre-wrap')">pre-wrap</button>
        <button onclick="changeWhiteSpace('pre-line')">pre-line</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
CSS (styles.css)​
.container {
  width: 300px;
  margin: 20px auto;
}

.box {
  border: 1px solid #333;
  padding: 10px;
  background-color: #f9f9f9;
  min-height: 100px;
}

.controls {
  margin-top: 20px;
}

button {
  margin-right: 10px;
  padding: 5px 10px;
}
JavaScript (script.js)​
function changeWhiteSpace(value) {
  // 取得文字容器
  const textBox = document.getElementById("textBox");
  // 動態設定 white-space 屬性
  textBox.style.whiteSpace = value;
}
操作步驟：​

  1. 建立新資料夾，例如 dynamic-whitespace-demo。

  2. 建立 index.html、styles.css 和 script.js 檔案。

  3. 複製上面的 HTML、CSS 和 JavaScript 程式碼。

  4. 用瀏覽器開啟 index.html，點擊不同按鈕，觀察 white-space 屬性的變化。

效果說明：​

  • 點擊按鈕後，textBox 的 white-space 屬性會動態改變，文字的空格和換行行為會隨之變化。

  • 這個範例展示了如何用 JavaScript 動態控制 CSS 屬性，適合用於互動式網頁。

常見問題與解決方法​

  1. 問題：文字溢出容器怎麼辦？

    • 解決：使用 overflow-wrap: break-word 或 text-overflow: ellipsis 搭配 white-space: nowrap 和 overflow: hidden。

  2. 問題：中文斷行看起來不自然？

    • 解決：嘗試 word-break: keep-all 保持單詞完整，或使用 overflow-wrap: break-word。

  3. 問題：多個空格被壓縮怎麼辦？

    • 解決：使用 white-space: pre 或 pre-wrap 保留空格。

總結​

CSS 提供了多種方式來處理空白字元，根據需求選擇合適的屬性：

  • 用 white-space 控制空格和換行的保留方式。

  • 用 word-break 和 overflow-wrap 處理長單詞或無空格文字的斷行。

  • 用 text-overflow 處理溢出文字的顯示方式。

  • 結合 JavaScript 可以實現動態效果，提升使用者體驗。