透過 CSS 管理連字號

Joe Medley

以許多書寫語言來說，有可能在音節和字詞之間換行。這通常是為了在一行文字中加入更多字元，目標是讓文字區域中的行數減少，從而節省空間。在這類語言中，中斷點會以連字號 (-) 表示。

CSS 文字模組層級 3 定義了連字號屬性，用於控制向使用者顯示連字號的時機，以及顯示連字號時的行為。自第 55 版起，Chrome 會導入連字號屬性。 根據規格，連字號屬性有三個值：none、manual 和 auto。為了說明這個情況，我們需要使用軟連字號 (­)，如以下範例所示。

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

柔性連字號只有在發生在結尾邊界時才會顯示。這個連字號在 Chrome 55 以上版本中的算繪方式，取決於 CSS hypens 屬性的值。

-webkit-hyphens: manual;
hyphens: manual;

合併這些結果會產生以下結果：

請注意，不會顯示柔性連字號。在所有情況下，如果包含軟連字號的字詞只佔一行，該連字號就不會顯示。現在我們來看看連字號三個值的運作方式。

不使用

在第一個範例中，連字號屬性設為 none。這樣即可避免顯示軟連字號。您可以調整視窗大小來確認這一點，讓「elit」這個字不會出現在顯示的文字行中。

手動使用

在第二個範例中，連字號屬性設為 manual，這表示只有在邊界破壞「elit」字詞時，才會出現軟連字號。同樣地，您可以調整視窗大小來確認這一點。

使用 Auto

在第三個範例中，連字號屬性設為 auto。在此情況下，您不需要軟連字號，因為使用者代理程式會自動判斷連字號位置。如果您調整視窗大小，就會發現瀏覽器將本範例與第二處以連字號連接，不過當中並沒有軟體連字號。如果繼續縮小視窗，您會看到瀏覽器可以中斷文字中任兩個音節之間的行。