• 原文地址：A look at CSS hyphenation in 2019
  • 原文作者：Michael Scharnagl
  • 譯文出自：掘金翻譯計劃
  • 本文永久鏈接：github.com/xitu/gold-mi
  • 譯者：jerryOnlyZRJ
  • 校對者：Mcskiller

2019 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）一詞，但這看起來不太好，甚至它還使文本更難閱讀。

這是因為，除非 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

推薦閱讀：

相关文章