規範文字重疊和換行

預設情況下，文字換行僅在特定情況下發生，例如當存在空格或破折號時。這可能會導致超出其容器元素的長字串或一系列字元（例如，URL）的設計和排列挑戰。

透過使用分詞、換行和溢出換行功能，您可以管理文字在元素內的分割和換行方式。這增強了不同設備尺寸和方向的可讀性，保證文字根據特定語言的要求適當換行，從而促進網站上的無縫多語言支援。

在本教程中，您將獲得以下知識：

1. 斷詞的應用
2. 斷行的用法
3. 文字換行的實現
4. 常見問題 (FAQ)

如何應用斷詞

利用分詞（「word-break」CSS 屬性），您可以修改預設的換行行為，並指示文字中應出現換行的位置，否則可能會溢位。斷字可用於防止複合詞內容中出現尷尬的換行，或符合特定語言的規定並確保正確的視覺呈現，從而增強國際用戶體驗。

斷字有以下三種選項：

• 普通的 – 遵循斷字標準規則的預設設定（即，在空格或連字號處斷行）
• 全部打破 – 為了防止溢出，任何單字或字元都可以斷到下一行（不包括中文/日文/韓文文字）
• 保留全部 – 對於中文、日文和韓文 (CJK) 文本，即使內容溢出，單字也保持不變。非 CJK 文本行為反映了 普通的

專家提示： 有關分詞屬性的更多見解並預覽這些選項，請訪問 MDN 網路 doc.

如何建立斷詞

在配置分詞之前，需要先向畫布引入文字元件（例如，富文本、段落等）。

要配置分詞符：

1. 反白顯示畫布上的文字組件
2. 導航至 風格面板 > 版式 > 更多類型選擇 > 打破
3. 從以下選項中選擇一個分詞選項 單字 下拉式選單（例如，正常、全部打破或保留全部）

與其他樣式屬性類似，您可以將分詞符號套用至父元素或斷點，並在子元素或不同的斷點上覆寫它。

筆記： 為了防止您發布的網站出現意外行為，請記住刪除所有存在的自訂分詞 CSS。

如何利用換行符

Webflow 中的換行（在 CSS 中稱為「空白」屬性）控制空白字元（即表示其他字元之間水平或垂直空間的字元）和換行符（即表示換行符的空白字元）的處理，確定文字是否換行或溢出。

斷行有六個選項：

• 普通的 – 預設值，壓縮空白序列並根據需要將文字換行到下一行
• 無包裹 – 與普通類似地壓縮空白，但將文字保留在單行上而不換行，即使文字超出了空格
• 預 – 保留空格和換行符，精確顯示 HTML 原始碼中的文本
• 預包裝 – 保留空白，同時允許文字根據需要換行到下一行
• 預線 – 壓縮空白、保留換行符並允許文字根據需要換行
• 空間 – 維護空白序列，在任意點啟用文字換行，並保留尾隨空格

專家提示： 若要深入了解空白屬性並預覽這些變化，請參閱 MDN 網路 doc.

如何配置換行符

在設定換行符之前，先向畫布引入文字元素（例如，富文本、段落等）。

要配置換行符：

1. 選擇畫布上的文字元素
2. 訪問 風格面板 > 版式 > 更多類型選擇 > 打破
3. 從中選擇換行選項 線 下拉清單（例如，正常、不換行、預、預換行、前進或空格）

與其他樣式屬性一樣，您可以將換行符號套用至父元素或斷點，並在子元素或不同的斷點上修改它。

筆記： 為了避免您發布的網站出現意外行為，請確保刪除所有自訂空白 CSS。

如何應用文字換行

文字換行（“overflow-wrap”CSS 屬性）使您能夠確定當單字超過容器寬度時如何換行，確保單字在容器內最近的合適點處斷開，從而保持設計的完整性和美觀性。

包裝有以下三種選擇：

• 普通的 – 遵循標準中斷規則的預設設定（即，在單字空格或連字符處中斷）
• 任何地方 – 為了防止溢出，如果行中沒有其他斷點可用，則可以在任何時刻中斷一系列原本牢不可破的字元（例如，URL 或長單字）
• 斷詞 – 功能類似 任何地方 選項，如果行中不存在其他可接受的斷點，則可以在任意點處斷開通常牢不可破的單字

專家提示： 有關溢出包裝屬性的更多見解並預覽這些選擇，請訪問 MDN 網路 doc.

如何配置換行行為

在設定換行行為之前，將文字元素（例如，富文本、段落等）新增至畫布。

配置換行行為：

1. 選擇畫布上的文字元素
2. 訪問 風格面板 > 版式 > 更多類型選擇 > 裹
3. 選擇換行選項（例如，正常、任意位置或斷字）

與其他樣式屬性類似，您可以將換行套用於父元素或斷點，並在子元素或不同斷點上修改它。

筆記： 為了防止您發布的網站出現意外行為，請確保刪除所有自訂溢出包裝 CSS。

常問問題

斷字和斷行有什麼差別？

斷字和換行都會影響頁面上的文字顯示。換行決定如何管理空白字符，以及文字是否溢出或換行。分詞控製文字中的單字碎片和換行。分詞對於 URL 或具有特定分詞規則的語言（例如中文、日文和韓文）特別有利。

為什麼「break-word」不能當斷詞選項？

根據 CSS規範，「word-break：break-word」已被棄用，取而代之的是「overflow-wrap：break-word」。但是，您可以使用“break-word”來進行換行。