L84 L84 - 1 year ago 145
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:

width: 16.6667%;
font-size: 0.95rem;
font-weight: 600;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

<div class="container">

When you run the snippet in Firefox the word
overflows the container and does not break. In Safari and IE it breaks like I expect. Why doesn't this work in Firefox?


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 class="no-js" lang="de">

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download