透過 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。在這種情況下，使用者代理程式會自動判斷連字號位置，因此不需要使用軟連字號。如果您調整視窗大小，就會發現瀏覽器會在這個範例中使用與第二個範例相同的位置加上連字號，但不會顯示軟連字號。如果繼續縮小視窗，您會發現瀏覽器能夠在文字的任何兩個音節之間換行。