CSS Hyphens Not Working in Firefox?

css firefox hyphenation css-hyphens
L84 picture L84 · Mar 11, 2015 · Viewed 13.3k times · Source

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:

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

Marat Tanalin picture Marat Tanalin · Mar 11, 2015

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.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Targeting only Firefox with CSS

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: <!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be …

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More