改善文字版面配置和易讀性

文字的版面配置 (尤其是行尾和段落結尾) 會影響網頁的可讀性和美觀度。CSS 提供多種文字換行選項，可改善特定用途。

如果是標題等短文字區塊，請使用 text-wrap: balance。這項屬性會指示瀏覽器盡可能平均分配各行文字，讓外觀更對稱。

text-wrap: pretty CSS 屬性可啟用更精密的換行演算法，提升內文的排版品質。這項功能專為避免「孤行」(段落最後一行的單一字詞) 而設計，可為長篇文字區塊建立更美觀的視覺「不規則」效果。

導入作業

1. 找出文字元素：

如果是 text-wrap: balance，請選取標題和表格標頭等短文字區塊。避免使用有明顯方塊的元素 (例如邊框或背景)，因為這可能會在版面配置中產生非預期的視覺空白區域。

針對 text-wrap: pretty，請選取可能包含長篇文字的元素，因為這類元素最容易出現孤字 (孤行) 或不當換行。包含下列元素：

• <p>
• <blockquote>
• <li>
• 任何其他可能包含長篇文字的元素。

選擇合適的包裝方法

2. 套用選取的包裝：

請特別將 text-wrap: balance 套用至簡短的多行元素，例如標題 (h1-h6)、副標題或醒目引文。

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

使用 text-wrap: pretty 啟用最佳化演算法，評估段落的最後幾行，找出最佳斷點。

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

重大限制和效能

text-wrap: balance

• 行數限制：瀏覽器會限制嘗試平衡的行數，以維持效能 (Chromium 通常為 6 行，Firefox 則為 10 行)。如果文字超出這項限制，瀏覽器會還原為標準 wrap 行為。如果文字區塊可能超出這些限制，請避免使用 text-wrap: balance。
• 指定應用：請勿在全域套用 text-wrap: balance (例如 * { text-wrap: balance; })。瀏覽器使用的疊代「二進位搜尋」演算法會耗用大量運算資源。請僅用於特定簡短文字元素。
• 與寬度的互動： text-wrap: balance 不會變更容器的寬度 (inline-size)，只會影響文字在該寬度內的換行方式。這可能會導致容器末端留白，影響依賴全寬文字區塊的版面配置。

text-wrap: pretty

• 效能與品質：必要：text-wrap: pretty 的運算成本高於預設的 wrap (貪婪) 演算法，因為它會評估多行 (通常是最後四行) 來最佳化中斷點。如果網頁含有大量文字內容，請避免將此屬性套用至所有元素。
• 最適合多行文字：pretty 的優點在三行以上的段落中最為明顯。對簡短的單行文字幾乎沒有影響。
• 瀏覽器專屬行為：請注意，導入細節會因瀏覽器而異。Chromium 瀏覽器通常會著重於最後四行，其他引擎則可能會評估整個段落。

備用策略

在不支援 text-wrap: balance 或 text-wrap: pretty 的瀏覽器中，系統會忽略該屬性，並使用預設的 wrap 行為換行文字。這項漸進增強功能會優雅降級為標準字體排版。這樣一來，您的內容在所有瀏覽器上都能完美呈現，同時為支援這項功能的瀏覽器提供更優質的體驗。

如果重要版面配置需要精細的文字版面配置，請使用 JavaScript 程式庫，但請注意，這可能會導致速度變慢，並造成效能問題。