阅读 2755

[译] 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)一词,但这看起来不太好,甚至它还使文本更难阅读。

Ü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 RutzJiminy Panoz 所述的有关 webkit 的浏览器的类似属性的信息。

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

关注下面的标签,发现更多相似文章
评论