L84 L84 - 3 months ago 21
CSS Question

CSS Hyphens Not Working in Firefox?

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

Answer

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>