首先看看新的 CSS 属性 Hyphenation（连字符样式）

让我们看一下浏览器对 CSS Hyphenation（连字符样式）的支持，我们今天如何使用它，以及我们希望在浏览器中看到哪些功能。

浏览器支持

浏览器很好地支持CSS连字符样式。您应该记住，虽然它可以在 Mac 和 Android 平台上运行基于 Chromium 的浏览器，但目前无法在 Windows 和 Linux 上运行（至少在 2019 年 1 月之前），并且它可以在 Opera Mini 和其他一些移动设备上运行也不在浏览器中（黑莓浏览器、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连字符，让我们看看它有哪些缺陷。

连字符太多

我们使用连字符的最大问题是它经常使用单个连字符。这意味着下面的例子，它连接了单词 Joseph 或 Josef，但这看起来不太好，甚至使文本更难以阅读。

这是因为，除非UA（客户端）能够计算出更好的值，否则意味着连字符：auto会将原始单词分割成看起来是前后两个单词。看起来总共有五个单词。这意味着连字符将用于每个至少五个字符长的单词，并且它将在至少两个字符之后或之前断开。

我不确定他们为什么想出这个默认值，但现在我们有了一个。幸运的是，规范中定义了一个解决方案——连字符分隔符属性。
它指定连字符单词中的最小字符数，因此我们可以使用它来覆盖默认值 5（单词长度）2（连字符之前）2（连字符之后）。

因此，理论上，我们可以使用以下配置，仅对 10 个或更多字符的单词使用连字符，并且仅在 4 个字符之前或之后断开：

hyphenate-limit-chars: 10 4 4;
复制代码

实际上，此功能仍然仅在 Internet Explorer 中可用10 + 在带有 -ms 前缀的 Edge 中受支持。如果能够更好地支持连字符分隔字符，那就太酷了 - 所以请让您最喜欢的浏览器知道您想要它，谢谢！这里是 Chromium 的问题，这里是 Firefox 的问题。

特别提醒：基于Webkit的浏览器（Safari）支持属性-webkit-hyphenate-limit-before、-webkit-hyphenate-limit-after和-webkit-hyphenate-limit-lines，这也允许您定义最小长度以及分割前后的最小字符数。

如您所见，2019 年对 CSS 连字符的支持非常有希望。对我来说唯一的问题是缺乏对 hyphenate-limit-chars 属性的支持，希望将来当有足够多的用户或开发人员请求时该属性会得到改进这。

作者：jerryOnlyZRJ
链接：https://juejin.im/post/5c612cfee51d4501515c8edf
来源：掘金❝ 商业转载请联系作者授权。非商业转载请注明来源。