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

L84*_*L84 5 css firefox hyphenation css-hyphens

我试图使用CSS连字符.它们在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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
<h3>DIAGNOSEVERFAHREN</h3>
</div>
Run Code Online (Sandbox Code Playgroud)

当您在Firefox中运行代码段时,该字DIAGNOSEVERFAHREN溢出容器并且不会中断.在Safari和IE中,它像我期望的那样打破.为什么这不适用于Firefox?

编辑

正如萨芬Tanalin的注意回答一个必须包括lang属性为连字符才能正常工作.我有这个作为我的<html>标签:

<html class="no-js" lang="de">
Run Code Online (Sandbox Code Playgroud)

Mar*_*lin 7

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

通常,至少该HTML元素应具有以下属性:

<html lang="en">
Run Code Online (Sandbox Code Playgroud)

对于大写字符,请在HTML中使用CSS而不是硬编码的大写字母:

.example {text-transform: uppercase; }
Run Code Online (Sandbox Code Playgroud)

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


jos*_*unt 7

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

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

p {
    width: 55px;
    border: 1px solid black;
    -moz-hyphens: auto;
    hyphens: auto;
}
Run Code Online (Sandbox Code Playgroud)
<p lang="en" class="auto">DIAGNOSEVERFAHREN</p>
<p lang="en" class="auto">diagnoseverfahren</p>
Run Code Online (Sandbox Code Playgroud)

  • 作为对看到此内容的其他人的说明,您可以使用 CSS 将文本转换为大写(`text-transform:uppercase;`)并且它可以正常工作。 (4认同)