title: Force Spans to Wrap In Inline-Block Parent
body: <p>I'm writing an app where I wrap individual characters in spans to better handle click events. The characters are in a div with <code>display: inline-block</code>. How do I get the text to wrap? I've tried:</p>
  
  <pre><code>div {
    display: inline-block;
    word-wrap: wrap;
    word-break: break-all;
  }
  </code></pre>
  
  <p>as well as</p>
  
  <pre><code>overflow-wrap: break-word;
  white-space: pre-wrap;
  </code></pre>
  
  <p>to no avail. As you can see, it works on normal text, but not on text wrapped in spans.</p>
  
  <p>JSBin: <a href="http://jsbin.com/hugiqohawi/edit?html,css,output" rel="nofollow noreferrer">http://jsbin.com/hugiqohawi/edit?html,css,output</a></p>