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;
}
<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>
Edit: It affects all capitalized and uppercase words. Apparently this is by design in Firefox and it won't be fixed anytime soon. Only German language supports the feature of hyphenating capitalized (not uppercase) words. https://bugzilla.mozilla.org/show_bug.cgi?id=656879