Menu
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">
786
In HTML, use ­ to insert a soft hyphen. Note: When the HTML <wbr> element leads to a line break, no hyphen is added.
hyphens: manual Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity: U+2010 (HYPHEN): the “hard” hyphen character indicates a visible line break opportunity.
hyphenate-limit-chars property is supported by Edge and Internet Explorer 10+ with the -ms prefix. It is also supported in Safari with -webkit-hyphenate-limit-before and –webkit-hyphenate-limit-after which are both legacy properties.
To create an em-dash on a Windows computer, hold down the [Alt] key and type 0151 on the numeric keypad. To create an em-dash on a Mac computer, hold down the shift and option/alt and type -. An en dash is the width of the letter "n" and is expressed in plain text as a hyphen ( - ).
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.
167
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
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
