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">

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

.example {text-transform: uppercase; }

由于 Firefox 38 中修复的错误 1105644 ，大写的德语文本在 Firefox 37 及更早版本中没有连字符。

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。