how to make " " word-wrap on chrome

this is my code :

<div id="a" style="position:absolute;top:300px;width:100px;height:100px;background:red;color:black;word-wrap:break-word;">
    <div id='a2' contenteditable=true >
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</div>

this code word-wrap in firefox , but in chrome i c开发者_如何学JAVAant word-wrap,

so how to make   word-wrap on chrome ?

thanks

---

You make them word wrap like this:

 &nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>

---

  creates a non-breaking space. The purpose of a non-breaking space is to provide a space, while not counting as a place to break a line. (Which normal spaces are.)

Therefore, you cannot make them word-wrap, as they're designed to not do so. If you want word-wrapping, use normal spaces.