html - 所有浏览器都支持 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 上试了一下，得到了非常不同的结果:



无前缀
恩
德
fr
它
es


安卓 11
✅
✅
✅
✅
❌
✅

IOS 14
❌
✅
✅
✅
✅
✅

Chrome 90 大苏尔
✅
✅
✅
✅
✅
✅

边缘 90 大 sur
✅
✅
✅
✅
✅
✅

ff 88 大苏尔
✅
✅
✅
❌
❌
✅

Safari 14 大苏尔
❌
✅
✅
✅
✅
✅

Chrome 90 埃尔卡坦
✅
✅
✅
✅
✅
✅

ff 88 埃尔卡坦
✅
✅
✅
❌
❌
✅

Chrome 90 视窗 7
❌
❌
❌
❌
❌
❌

边缘 90 窗口 7
❌
❌
❌
❌
❌
❌

ff 88 窗口 7
✅
✅
✅
❌
❌
✅

Chrome 90 视窗 10
❌
❌
❌
❌
❌
❌

边缘 90 窗口 10
❌
❌
❌
❌
❌
❌

ff 88 视窗 10
✅
✅
✅
❌
❌
✅


我还发现了与我的结果非常不同的支持表:

mozdev hyphen support

caniuse EN hyphens

caniuse DE hyphens

caniuse FR hyphens

caniuse IT hyphens

caniuse ES hyphens

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

Answer 1

Could this be caused by languages installed on the operation systems?

我的研究使我得出结论，这是 Chromium 的一个错误，它仅适用于 Adroid 和 Mac。所以是的，这取决于操作系统。在 Canary M88 中修复，我不能说它是否已经实现稳定。编辑: It is shipped already如果您使用 Chrome 90 对其进行了测试，这可能无法解释为什么您在 Windows 7 和 10 上的 Chrome/Edge 上没有获得预期的结果。
但是，这一切都可能会引导您走向正确的方向，尤其是平台支持说明:

This feature enables the Android's hyphenation engine on all platforms, except Mac keeps using the hyphenation engine in the platform.

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