html lang with css hyphens

Question

I have added the following css properties to my html

 word-break: break-word;
 hyphens: auto;

and set the html lang attribute to "de".

The word break happens as expected

Deutsches Ipsum Dolor meliore 
Handtasche et Köln Te Eichhörn-
chen utamur zu spät Exerci Sieben-
tausendzweihundertvierundfünfzig 
eu Erbsenzähler

When I remove the hyphens css attribute the word-break is totally different

Deutsches Ipsum Dolor meliore 
Handtasche et Köln Te 
Eichhörnchen utamur zu spät 
Exerci 
Siebentausendzweihundertvierundfünfzig 
eu Erbsenzähler

I want to understand why word-break doesn't break appropriately without the hyphens. Also here is a fiddle https://jsfiddle.net/ngrx8y24/

Answer 1

From my understanding, the lang="de" attribute when combined with the css hyphens:auto has its own line breaking rules, but when you add the css word-break, then that overrides the built-in dutch+hyphens line breaking rules.

See the last example here: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#examples

EDIT: overflow-wrap:anywhere appears to make lang="en-US" wrap with hyphens, but does not add an initial hyphen to long capitalized words like lang="de" does.

EXAMPLES:

<p style="clear:both; width: 160px; margin: 2px; background: gold; hyphens: auto; overflow-wrap:anywhere;" lang="de">They say the fishing is excellent at
  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, German rules)</p>
 
<p style="clear:both; width: 160px; margin: 2px; background: gold; hyphens: auto; overflow-wrap:anywhere;" lang="en-US">They say the fishing is excellent at
  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, english-US rules)</p>