CSS 新属性Hyphenation（连字符样式）初探

看看 CSS Hyphenation（连字符样式）的浏览器支持情况，今天的我们该如何使用它以及我们希望在浏览器中看到哪些功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

浏览器支持情况

浏览器对 CSS 连字符样式 支持的非常好。您应该记住，虽然它适用于 Mac 和 Android 平台上基于 Chromium 的浏览器，但它在 Windows 和 Linux 上暂时不起作用（至少在2019年1月之前），并且它在 Opera Mini 和其他一些移动浏览器（Blackberry 浏览器，IE 移动设备...）中也不起作用，但整体支持是可靠的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

使用 CSS 连字符

要使用连字符，我们仍然需要为 IE 、Edge 和 Chromium 添加前缀，因此最好对每个应该使用连字符的文本使用以下内容：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

.hyphenate {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
复制代码

如果您可能想要在不受支持的浏览器中切分单词而不是修改布局，我建议你像下面这样做。这样，所有单词将在受支持的浏览器中连字符，并在不受支持的浏览器中分成新行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
复制代码

现在，我们今天知道如何使用CSS Hyphenation，让我们看看它还有那些缺陷。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

太多连字符

我们对连字符的最大问题是它经常使用简单的连字符。这意味着以下示例，在这里它连接约瑟夫（Josef 或 Joseph）一词，但这看起来不太好，甚至它还使文本更难阅读。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

这是因为，除非 UA（客户端）能够计算出更好的值，否则预示着 hyphens: auto 将把原来的单词拆分成看似前后都有两个单词，这样看起来总共就好像有五个单词。这意味着连字符将用于每个单词，其长度至少为五个字符，并且它会在至少两个字符之后或之前中断。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

我不确定他们为什么想出这个默认值，但现在我们已经拥有了这样一个值。不过好在规范中已经定义了一个解决方案 —— 连字符字符数限制属性.
它指定了带连字符的单词中的最小字符数，因此我们可以使用它来覆盖默认值5（单词长度）2（连字符之前）2（连字符之后）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

因此，理论上我们可以使用以下配置仅对10个或以上字符的单词使用连字符，并且仅在四个字符之前或之后中断：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

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

实际上，此属性仍仅在 Internet Explorer 10+ 和 Edge 中以 -ms 前缀支持。为连字符限制字符提供更好的支持真的很棒 —— 所以请让你最喜欢的浏览器知道你想要它，谢谢！以下是 Chromium and here for Firefox 的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

特别提醒：基于 Webkit 的浏览器（Safari）支持 -webkit-hyphenate-limit-before、-webkit-hyphenate-limit-after 和 -webkit-hyphenate-limit-lines properties，它还允许您定义最小长度和分割之前和之后的最小字符数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html

正如你所看到的那样，支持 CSS Hyphenation 在 2019年是非常有希望的。对我来说唯一的问题是缺乏对 hyphenate-limit-chars 属性的支持，当有足够的用户或者开发者要求时，它有望在将来变得更好。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9570.html