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 上试了一下，得到了非常不同的结果：

<头>

	无前缀	en	de	fr	它	es
安卓 11	✅	✅	✅	✅	❌	✅
iOS 14	❌	✅	✅	✅	✅	✅
chrome 90 big sur	✅	✅	✅	✅	✅	✅
edge 90 big sur	✅	✅	✅	✅	✅	✅
ff 88 big sur	✅	✅	✅	❌	❌	✅
safari 14 big sur	❌	✅	✅	✅	✅	✅
chrome 90 el capian	✅	✅	✅	✅	✅	✅
ff 88 酋长	✅	✅	✅	❌	❌	✅
铬 90 视窗 7	❌	❌	❌	❌	❌	❌
edge 90 windows 7	❌	❌	❌	❌	❌	❌
ff 88 窗口 7	✅	✅	✅	❌	❌	✅
铬 90 视窗 10	❌	❌	❌	❌	❌	❌
边缘 90 窗口 10	❌	❌	❌	❌	❌	❌
ff 88 窗口 10	✅	✅	✅	❌	❌	✅

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

这可能是操作系统上安装的语言造成的吗？

Answer 1

<块引用>

这可能是操作系统上安装的语言造成的吗？

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

<块引用>

此功能可在所有平台上启用 Android 的断字引擎，但 Mac 一直在平台中使用断字引擎。

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

Answer 2

CSS 支持与操作系统无关。

您可以将浏览器视为可以运行网络语言的虚拟机（ HTML, CSS, JS, ...).

当向其中一种语言添加新功能时，浏览器必须实现它。这就是为什么您在搜索中得到不同结果的原因。浏览器以自己的节奏实现这些新功能。这意味着可能现在 Chrome 不支持某个功能，但明天会支持。

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

我不会担心这个。部分或全部具有此功能的浏览器会使用它，没有的浏览器则不会。

您始终可以在 Mozilla 的 web 上看到对某项功能的支持。最后，您将看到一个在不同浏览器上支持连字符的表格。当然，这是 Mozilla 页面，因此只有真实信息是 Mozilla 支持（您不能相信其他人已更新）。

编辑：

请注意，浏览器根据 SO 有不同的实现。例如，Chrome 具有不同的功能，具体取决于平台/SO（例如 Windows 与 Android）。

Answer 3

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

对我来说，我会使用连字符：auto; word-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;
}

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

所有浏览器都支持 CSS 断字吗？

3 个答案: