[譯] 2019 CSS 新屬性“連字元”初探

jerryOnlyZRJ發表於2019-02-11
CSS字元

我最近在製作一個使用大標題（字型大小）的網站，也有德語版本，這意味著經常存在相當長的單詞，並且周圍的容器騰出的空間不足以美觀地展示它。如果沒有做任何調整措施，就會出現水平滾動條，這將“損壞”我們的頁面佈局。因此，我重讀了大約四年前寫的 如何處理頁面中的長單詞 一文並且實現了最終的解決方案。

這些解決方案似乎還能起到很好的作用，但這些方法仍然存在一些問題。讓我們來看看 CSS Hyphenation（連字元樣式）的瀏覽器支援情況，今天的我們該如何使用它以及我們希望在瀏覽器中看到哪些功能。

瀏覽器支援情況

瀏覽器對 CSS 連字元樣式 支援的非常好。您應該記住，雖然它適用於 Mac 和 Android 平臺上基於 Chromium 的瀏覽器，但它在 Windows 和 Linux 上暫時不起作用（至少在2019年1月之前），並且它在 Opera Mini 和其他一些移動瀏覽器（Blackberry 瀏覽器，IE 移動裝置...）中也不起作用，但整體支援是可靠的。

使用 CSS 連字元

要使用連字元，我們仍然需要為 IE 、Edge 和 Chromium 新增字首，因此最好對每個應該使用連字元的文字使用以下內容：

.hyphenate {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
複製程式碼

如果您可能想要在不受支援的瀏覽器中切分單詞而不是修改佈局，我建議你像下面這樣做。這樣，所有單詞將在受支援的瀏覽器中連字元，並在不受支援的瀏覽器中分成新行。

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
複製程式碼

現在，我們今天知道如何使用CSS Hyphenation，讓我們看看它還有那些缺陷。

太多連字元

我們對連字元的最大問題是它經常使用簡單的連字元。這意味著以下示例，在這裡它連線約瑟夫（Josef 或 Joseph）一詞，但這看起來不太好，甚至它還使文字更難閱讀。

Über Josef Hauser

這是因為，除非 UA（客戶端）能夠計算出更好的值，否則預示著 hyphens: auto 將把原來的單詞拆分成看似前後都有兩個單詞，這樣看起來總共就好像有五個單詞。這意味著連字元將用於每個單詞，其長度至少為五個字元，並且它會在至少兩個字元之後或之前中斷。

我不確定他們為什麼想出這個預設值，但現在我們已經擁有了這樣一個值。不過好在規範中已經定義了一個解決方案 —— 連字元字元數限制屬性.
它指定了帶連字元的單詞中的最小字元數，因此我們可以使用它來覆蓋預設值5（單詞長度）2（連字元之前）2（連字元之後）。

因此，理論上我們可以使用以下配置僅對10個或以上字元的單詞使用連字元，並且僅在四個字元之前或之後中斷：

hyphenate-limit-chars: 10 4 4;
複製程式碼

實際上，此屬性仍僅在 Internet Explorer 10+ 和 Edge 中以 -ms 字首支援。為連字元限制字元提供更好的支援真的很棒 —— 所以請讓你最喜歡的瀏覽器知道你想要它，謝謝！以下是 Chromium and here for Firefox 的問題。

特別提醒：基於 Webkit 的瀏覽器（Safari）支援 -webkit-hyphenate-limit-before、-webkit-hyphenate-limit-after 和 -webkit-hyphenate-limit-lines properties，它還允許您定義最小長度和分割之前和之後的最小字元數。

正如你所看到的那樣，支援 CSS Hyphenation 在 2019年是非常有希望的。對我來說唯一的問題是缺乏對 hyphenate-limit-chars 屬性的支援，當有足夠的使用者或者開發者要求時，它有望在將來變得更好。

2018年1月18日更新：新增了 Alexander Rutz 和 Jiminy Panoz 所述的有關 webkit 的瀏覽器的類似屬性的資訊。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章