7

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">
Community
  • 1
  • 1
L84
  • 45,514
  • 58
  • 177
  • 257
  • 1
    For some strange reason it seems to be because the word is in capital letters. See: http://jsfiddle.net/nufn4eej/ – joshhunt Mar 11 '15 at 00:44
  • @joshhunt - Your right! Interesting. I wonder if this is a bug? Please post as an answer so I may accept. – L84 Mar 11 '15 at 00:49

4 Answers4

14

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.

Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52
  • @Lynda Your example does work for me in Firefox 38a2 (Developer Edition) regardless of character case. But does not work for uppercase in Fx 37. So it's probably a bug fixed in Firefox 38+. – Marat Tanalin Mar 11 '15 at 00:53
  • Good to know. Knowing the case is the problem it is an easy fix, just add the CSS: `text-transform:uppercase;` and it works in Firefox as intended. – L84 Mar 11 '15 at 00:54
  • @Lynda I've found the specific hyphenation bug of Fx 37- and added information about it to my answer. – Marat Tanalin Mar 11 '15 at 01:02
14

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

Haris Kamberovic
  • 3
  • 4
joshhunt
  • 5,197
  • 4
  • 37
  • 60
  • 4
    As a note for others who see this, you can use CSS to transform the text to uppercase (`text-transform:uppercase;`) and it works without an issue. – L84 Mar 11 '15 at 01:02
  • 1
    @HannesSchneidermayer Chrome has never had working hyphenation – porglezomp Sep 19 '16 at 19:38
  • The app I'm working on has multiple languages in it, and German has long words that need hyphenation. I got around capital letters not working in Firefox by adding the language to the document object. This was helpful: https://stackoverflow.com/questions/34237420/manipulate-the-html-or-body-tag-in-react – AdamHinckley Jun 11 '20 at 20:50
1

I got this type of issue on ios safari , there are multiple hyphens on that page few of those were not working while remaining works . but i am not supposed to use text-transform:uppercase, so increased the font size to 1px and it worked for me.

Ruby Nury
  • 21
  • 1
0

Inorder to demonstrate the concept of hyphenation, you need to give the lang attribute is set to en on the parent element.

user6745198
  • 1