CSS连字符不工作在Firefox？ [英] CSS Hyphens Not Working in Firefox?
问题描述
我试图使用 CSS连字符。他们在IE 11和Safari中工作，但在Firefox中无法正常工作，我不确定为什么。这是一个例子：
.container {width：16.6667％;背景：#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 class =no-jslang =de>
有些奇怪的原因似乎是因为单词是大写字母。我认为这与火狐浏览器没有什么关系，当它搜索字符串连接字典时，它并不是一个单词。
我找不到任何错误报告， MaratTanalin认为它已在Firefox v38中修复。
p {width：55px;边框：1px纯黑色; -moz-hyphens：auto; hyphens：auto;}
< p lang =en class =auto> DIAGNOSEVERFAHREN< / p>< p lang =enclass =auto> diagnoseverfahren< / p>
I am attempting to use CSS Hyphens. They work in IE 11 and Safari but does not work in Firefox properly and I am unsure why. Here is an example:
.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>
When you run the snippet in Firefox the word DIAGNOSEVERFAHREN overflows the container and does not break. In Safari and IE it breaks like I expect. Why doesn't this work in Firefox?
Edit
As noted by Marat Tanalin's answer one must include the lang attribute for the hyphens to work correctly. I have this as my <html> tag:
<html class="no-js" lang="de">
For some strange reason it seems to be because the word is in capital letters. I assume it has something to do with Firefox not thinking that it is a word when it searches the hyphenation dictionary.
I couldn't find any bug reports on it but @MaratTanalin thinks that it has been fixed in 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>
这篇关于CSS连字符不工作在Firefox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
