透過 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

在第一個範例中，連字號屬性設為 none。這樣可避免系統顯示軟連字號。您可以調整視窗大小來確認這項情況，讓「elit」一詞無法在可見的文字行中顯示。

使用手動

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

使用自動

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