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

Question

我正在尝试使用 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 中的代码段时，单词 DIAGNOSEVERFAHREN 会溢出容器并且不会中断。在 Safari 和 IE 中，它会像我预期的那样中断。为什么这在 Firefox 中不起作用？

编辑

正如 Marat Tanalin 的所指出的，必须包含 lang 属性才能使连字符正常工作。我将此作为我的 <html> 标签：

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

Answer 1

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

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

<html lang="en">

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

.example {text-transform: uppercase; }

大写的 german 文本在 Firefox 37 及更早版本中没有连字符，因为 bug 1105644 在 Firefox 38 中已修复。

Answer 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

Answer 3

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

Answer 4

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

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

CSS Hyphens Not Working in Firefox?

css

firefox

hyphenation

css-hyphens