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的answer所述，必须包含连字符的lang属性才能正常工作。我将此作为<html>标记：

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

Answer 1

由于一些奇怪的原因，似乎是因为这个词是大写字母。我认为它与Firefox有关，在搜索连字词典时不会认为它是一个单词。

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

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

<p lang="en" class="auto">DIAGNOSEVERFAHREN</p>
<p lang="en" class="auto">diagnoseverfahren</p>

Answer 2

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

通常，至少HTML元素应具有以下属性：

<html lang="en">

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

.example {text-transform: uppercase; }

由于Firefox 38中修复了bug 1105644，

大写的德语文本在Firefox 37及更早版本中不会连字符。

Answer 3

我在ios safari上遇到过这种类型的问题，该页面上有多个连字符，其余部分在保留工作时无效。但我不应该使用text-transform：大写，所以将字体大小增加到1px，它对我有用。

Answer 4

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

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

4 个答案: