title: Preventing children (span) from overflowing in middle of word/line (CSS/HTML)
body: <p>So I have several spans inside of a div as so:</p>
  
  <pre><code>&lt;div id="parent"&gt;
    &lt;span class="child"&gt;span one&lt;/span&gt;
    &lt;span class="child"&gt;span two&lt;/span&gt;
    &lt;span class="child"&gt;span three&lt;/span&gt;
    &lt;span class="child"&gt;span four&lt;/span&gt;
    &lt;span class="child"&gt;span five&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>parent div(#parent) is fixed width, not fluid. span.child has an auto width, with a padding of 3px on either side. I am having an issue where the span tag will overflow to the next line of #parent, even in the middle of a sentence.</p>
  
  <p>For example: span.child containing "span four" is at the end of the first line in #parent, it will overflow the word "four" to the next line, with "span" being on the line above still. I have tried word-wrap to no avail.</p>
  
  <p>Any ideas where I should start for this? I'm not sure if I need to apply styling to the span, or the parent div. And which property is best for this, I've only come up with word-wrap and can't get that work. Thanks!</p>