make multiple <span> auto break line in a container
<p>My question is as shown from here: <a href="https://jsfiddle.net/hrhktkbzyy/oubgpy8m/1/" rel="nofollow noreferrer">jsfiddle demo</a></p>

<p>As you can see, the <code>&lt;span&gt;</code> element will automatically break line if I put each <code>&lt;span&gt;</code> on a new line in the <code>html</code> file.</p>

<p>But, if I put them one by one together, they will not break line.  </p>

<p>Please Note, why I asked this question is because in my real project, I added the <code>&lt;span&gt;</code> from my <code>js</code> code dynamically.  That will cause the same problem, which is that the <code>&lt;span&gt;</code> can't automatically break line, and will add a horizontal scrollbar when the number of them increased.</p>

<p>Any suggestion will be highly appreciated.</p>

<p><em>p.s.  I'm using Jquery and Bootstrap 3 in my code.</em></p>