title: span word-wrap in list elements
body: <p>I am trying to have multiple <code>span</code> elements in a list item. They are suppose to be <code>inline</code> of course. When i add the <code>word-wrap: break-word</code> property to one of the <code>span</code> elements, i am expecting the words to wrap, but the element also wrap.</p>
  
  <p>In <a href="http://jsfiddle.net/qntkhjdd/" rel="nofollow noreferrer">this fiddle</a> you can clearly see that the <code>span</code> element with class <code>message</code> is behind the element <code>name</code>. I would like these elements inline but with a word wrapping for the second with class <code>message</code>.</p>
  
  <p>What I am trying to achive could be compared to twitch.tv chat messages structure.
  <img src="https://i.stack.imgur.com/vMb1h.png" alt="enter image description here"></p>
  
  <p>The twitch.tv HTML for a message is the following:</p>
  
  <pre><code>&lt;li class="ember-view message-line chat-line" id="ember6565"&gt;
    &lt;div class="indicator"&gt;&lt;/div&gt;
    &lt;span class="timestamp float-left"&gt;3:34&lt;/span&gt; 
    &lt;span class="badges float-left"&gt;&lt;/span&gt;
    &lt;span class="from" style="color:#D2691E"&gt;yourusername&lt;/span&gt;
    &lt;span class="colon"&gt;:&lt;/span&gt; 
    &lt;span class="message" style="undefined"&gt;message here&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Regards</p>