深入理解word-break

一、word-breaker與word-break的概念

當我們需要在瀏覽器中排版中文文本時，對於中文的零散排列需要進行斷詞處理，即當文本不足以填充一行時如何進行換行，這時我們就需要用到word-break。

簡單來說，word-break可以理解為「單詞打斷」，即告訴瀏覽器如何處理單詞的多餘部分：當一個單詞在一行放不下時，如何將單詞斷成兩行。它有兩個屬性值：normal和break-all。

word-breaker是一個內置的快速斷詞表，將非中文文本按照空格、連字符等標點符號進行斷詞。而中文單詞並沒有空格或類空格區分，需要通過指定word-break來處理中文文本。

二、怎麼使用word-break

如果你的文本中僅有英文或數字等非中文字符，可以直接對父元素設置樣式來使用word-break：

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

如果你的文本中存在中文，就需要在樣式中指定斷詞規則，常用的方式有：

.example {
  word-break: keep-all;//默認值，保持全部單詞不換行
}

.example {
  word-break: loose;//鬆散斷行，以單個漢字為一個斷點
}

.example {
  word-break: normal;//普通斷行，以漢字為一個斷點進行斷詞
}

.example {
  word-break: break-all;//強制斷行，以每個字符為斷點進行斷詞
}

需要注意的是，在使用中文文本時，為了保證斷詞能夠正確進行，需要在父元素上設置文本過長時的截斷方式，如：

.example {
  overflow: hidden;//超出部分隱藏
  text-overflow:ellipsis;//超出部分以省略號代替
  white-space: nowrap;//文本不換行
}

三、CSS中word-break和word-wrap的區別

一些新手常常會將word-wrap和word-break混為一談，但實際上這兩個屬性有所不同：

word-wrap用於解決單詞內過長導致的換行問題，通常與overflow-wrap等效，表示在單詞內換行時如何打斷單詞，常用屬性值為normal和break-word。

而word-break用於解決斷詞過長導致的換行問題，即當一個單詞在一行放不下時如何將單詞斷成兩行。同時，它可以直接對漢字進行處理，而word-wrap只能對單詞內的非中文字符進行處理。

四、關於wordbreakers.dll

在Windows系統中，使用默認的英文鍵盤進行文本編輯時，默認使用的是Latin斷詞庫。針對中文用戶，Windows提供了一種名為”中文詞庫”的斷詞庫wordbreakers.dll。

這個庫文件在默認情況下並沒有包含在Windows中，需要手動加載。同時，不同版本的Windows中包含的wordbreakers.dll也不盡相同，因此需要使用不同的安裝方式進行加載。

五、wordbreakbreakall標點不受影響

在使用word-break屬性時，我們常常遇到的一個問題是標點符號會被緊貼單詞，突顯了一些不規範的排版問題。例如，”這是一個中文，還有英文123。”按照英文打印規則，應當為”這是一個中文，還有英文 123 。”。

為了解決這個問題，我們可以對標點符號設置一個特殊的樣式：

.example {
  word-break: break-all;
}
.example * {
  word-break: normal;//標點符號不受影響
}

六、小結

word-break是排版中一個非常重要的屬性，可以解決一些基礎的排版問題。合理地使用word-break屬性不僅可以提高排版的美觀程度，同時也可以減少不必要的排版工作量。同時，理解和掌握word-wrap與word-break的區別，可以更好地幫助我們理解排版中的布局方式。