CSS 连字符在 Firefox 中不起作用？答案

【问题标题】：CSS Hyphens Not Working in Firefox?CSS 连字符在 Firefox 中不起作用？
【发布时间】：2019-12-05 04:46:57
【问题描述】：

我正在尝试使用CSS Hyphens。它们在 IE 11 和 Safari 中工作，但在 Firefox 中不能正常工作，我不确定为什么。这是一个例子：

.container{
    width: 16.6667%;
    background:#ccc;
}
h3{
    font-size: 0.95rem;
    font-weight: 600;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

<div class="container">
<h3>DIAGNOSEVERFAHREN</h3>
</div>

当您在 Firefox 中运行 sn-p 时，单词 DIAGNOSEVERFAHREN 会溢出容器并且不会中断。在 Safari 和 IE 中，它会像我预期的那样中断。为什么这在 Firefox 中不起作用？

编辑

正如 Marat Tanalin 的 answer 所述，必须包含 lang 属性才能使连字符正常工作。我有这个作为我的<html> 标签：

<html class="no-js" lang="de">

【问题讨论】：

出于某种奇怪的原因，这似乎是因为这个词是大写的。见：jsfiddle.net/nufn4eej
@joshhunt - 你的权利！有趣的。我想知道这是否是一个错误？请作为答案发布，以便我接受。

标签： css firefox hyphenation css-hyphens

【解决方案1】：

确保元素或其某些父元素具有适当的lang 属性。 CSS 连字符的工作至关重要。

一般来说，至少HTML元素应该有这个属性：

<html lang="en">

对于大写字符，使用 CSS 而不是 HTML 中的硬编码大写文本：

.example {text-transform: uppercase; }

由于在 Firefox 38 中修复了 bug 1105644，因此在 Firefox 37 和更早版本中，大写的 german 文本没有连字符。

【讨论】：

@Lynda 您的示例在 Firefox 38a2（开发人员版）中对我有用，无论字符大小写如何。但在 Fx 37 中不适用于大写。所以这可能是 Firefox 38+ 中修复的错误。
很高兴知道。知道这个问题很容易解决，只需添加 CSS：text-transform:uppercase;，它就可以在 Firefox 中按预期工作。
@Lynda 我发现了 Fx 37- 的特定断字错误，并将有关它的信息添加到我的答案中。
感谢您的帮助。

【解决方案2】：

出于某种奇怪的原因，这似乎是因为这个词是大写的。我认为它与 Firefox 有关，它在搜索连字符字典时不认为它是一个词。

我找不到任何关于它的错误报告，但@MaratTanalin 认为它已在 Firefox v38 中修复。

p {
    width: 55px;
    border: 1px solid black;
    -moz-hyphens: auto;
    hyphens: auto;
}

<div>
    <h4>English</h4>
    <p lang="en" class="auto">DIAGNOSEVERFAHREN</p>
    <p lang="en" class="auto">Diagnoseverfahren</p>
    <p lang="en" class="auto">diagnoseverfahren</p>
</div>
<div>
    <h4>German</h4>
    <p lang="de" class="auto">DIAGNOSEVERFAHREN</p>
    <p lang="de" class="auto">Diagnoseverfahren</p>
</div>

编辑：它影响所有大写和大写的单词。显然这是 Firefox 设计的，不会很快修复。只有德语支持大写（不是大写）单词的断字功能。 https://bugzilla.mozilla.org/show_bug.cgi?id=656879

【讨论】：

作为看到此内容的其他人的说明，您可以使用 CSS 将文本转换为大写 (text-transform:uppercase;)，它可以正常工作。
@HannesSchneidermayer Chrome 从来没有有效的断字
我正在开发的应用程序有多种语言，而德语有很长的单词需要连字符。通过将语言添加到文档对象，我绕过了在 Firefox 中不起作用的大写字母。这很有帮助：stackoverflow.com/questions/34237420/…

【解决方案3】：

我在 ios safari 上遇到了此类问题，该页面上有多个连字符，其中一些在剩余工作时不起作用。但我不应该使用 text-transform:uppercase，所以将字体大小增加到 1px，它对我有用。

【讨论】：

【解决方案4】：

为了演示断字的概念，需要在父元素上给 lang 属性设置为 en。

【讨论】：