CSS Hyphens Not Working in Firefox?

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


Make sure the element or some of its parents has an appropriate lang attribute. It is crucial for CSS hyphens to work.

In general, at least the HTML element should have the attribute:

<html lang="en">

For uppercasing characters, use CSS instead of hardcoded uppercased text in HTML:

.example {text-transform: uppercase; }

Uppercased german text is not hyphenated in Firefox 37 and older due to the bug 1105644 fixed in Firefox 38.

Tags:

Css

Firefox

Hyphenation

Css Hyphens

Recent Posts