css - Why hyphens don't work with inner <span>? -

i'm trying hyphens working on text has <span> elements inside highlighting. seems break hyphen algorithm. there way fix behaviour hyphens placed same without <span> elements? i'm not asking workaround ­

the code (sandbox: https://codepen.io/anon/pen/ayzxpm):

.limit {    max-width: 50px;    hyphens: auto;    font-size: 20px;    background-color: #eee;  }    span {    color: red;  }

<div class="limit">    <p>      appletreefruitthing    </p>    <p>      apple<span>tree</span>fruitthing    </p>  </div>

using lang attribute

adding lang attribute vadim ovchinnikov suggested (<div class="limit" lang="en">) can lead better results on platform/browser combinations. on firefox 54, windows 10 result:

but seems buggy. hyphen should black in opinon , hyphen algorithm seems miss chance make line break between "fruit" , "tree", completly ignoring max-width set container.

chrome has partial support hyphens property (only mac , android platforms), can't make work on windows.

i don't see difference between span presence , absence in firefox, ie , edge (all on windows) code.

to make work there you'll need set lang container , add vendor prefixes (for -ms-hyphens ie/edge , -webkit-hyphens safari). demo:

.limit {    max-width: 50px;    font-size: 20px;    /* safari */    -webkit-hyphens: auto;    /* ie, edge */    -ms-hyphens: auto;    hyphens: auto;    background-color: #eee;  }    span {    color: red;  }

<div class="limit" lang="en">    <p>     appletreefruitthing    </p>    <p>      apple<span>tree</span>fruitthing    </p>  </div>

---

to work in browsers may shouldn't use css hyphens property, insert ­ manually want hyphens.

.limit {    max-width: 50px;    font-size: 20px;    background-color: #eee;  }    span {    color: red;  }

<div class="limit">    <p>     apple&shy;tree&shy;fruitthing    </p>    <p>      apple&shy;<span>tree</span>&shy;fruitthing    </p>  </div>