所有浏览器都支持CSS连字符吗

Question

我正在尝试用不同语言构建一个具有动态用户内容的网站。

例如：

<p lang="en">disestablishment</p>
<p lang="de">Käsekuchenbäckereibesitzer</p>
<p lang="fr">Consciencieuse</p>
<p lang="it">Imbarazzato</p>
<p lang="es">decepcionado</p>

我正在使用CSS激活连字符：

p[lang] {
width: 60px;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

它似乎在我的机器上运行得很好，但我试图了解它是否也在其他平台和机器上运行。所以我在BrowserStack上尝试了一下，得到了非常不同的结果：

enfrites[/tr>

	未固定	de
android 11	✅	✅	✅	✅	❌	✅
ios 14	❌	✅	✅	✅	✅	✅
chrome 90大表面	✅	✅	✅	✅	✅	✅
edge 90 big sur	✅	✅	✅	✅	✅	✅
ff 88 big sur	✅	✅	✅	❌	❌	✅
safari 14 big sur	❌	✅	✅	✅	✅	✅
chrome 90 el capitan	✅	✅	✅	✅	✅	✅
ff 88 el capitan	✅	✅	✅	❌	❌	✅
chrome 90 windows 7	❌	❌	❌	❌	❌	❌
edge 90 windows 7	❌	❌	❌	❌	❌	❌
ff 88窗口7	✅	✅	✅	❌	❌	✅
chrome 90 windows 10	❌	❌	❌	❌	❌	❌
边缘90窗口10❌	❌	❌	❌	❌	❌
ff 88窗口10	✅	✅	✅	❌	❌	✅

这可能是由操作系统上安装的语言引起的吗？

我的研究得出结论，这是Chromium的一个错误，它只适用于Adroid和Mac。是的，这取决于操作系统。在Canary M88中修复，我不能说它是否已经实现稳定编辑：它已经发货了。如果你用Chrome 90测试过它，这可能无法解释为什么你在Windows7&10然而，这一切可能会引导您走向正确的方向，尤其是平台支持说明：

此功能在所有平台上启用Android的连字符引擎，除了Mac在平台中继续使用连字符引擎。

https://bugs.chromium.org/p/chromium/issues/detail?id=652964

CSS支持与操作系统无关。

你可以把浏览器想象成可以运行网络语言的虚拟机(HTML、CSS、JS…(。

当一个新功能被添加到这些语言中时，浏览器必须实现它。这就是为什么你在搜索中会得到不同的结果。浏览器按照自己的节奏实现这些新功能。这意味着也许现在Chrome不支持某个功能，但明天会支持。

至于您的个人问题，由于每种语言都使用不同的连字符，浏览器需要为所有语言实现此功能。这不是一个小功能，所以跟踪它对所有浏览器的支持是一项艰巨的工作。

我不会担心的。那些部分或全部拥有此功能的浏览器会使用它，而那些没有的浏览器则不会。

您总是可以在Mozilla的网站上看到对某个功能的支持。最后，您将看到一个在不同浏览器上支持连字符的表格。当然，这是Mozilla的页面，所以只有Mozilla的支持才是真正的信息(你不能相信其他人会更新(。

编辑：

请注意，浏览器根据SO有不同的实现方式。例如，Chrome根据平台/SO有不同的功能(例如，Windows与Android(。

有关连字符的更多详细信息，请考虑查看Mozila文档页面https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens.这肯定会帮你的！

对我来说，我会使用连字符：auto；单词break：break all如下(适用于大多数浏览器(：

p[lang] {
width: 60px;
-ms-word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

希望这能帮助你！如果这确实有助于你实现目标，也要更新答案。