[譯] 2019 CSS 新屬性「連字符」初探

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

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

這些解決方案彷佛還能起到很好的做用，但這些方法仍然存在一些問題。讓咱們來看看 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。