span word-wrap in list elements

Question

I am trying to have multiple span elements in a list item. They are suppose to be inline of course. When i add the word-wrap: break-word property to one of the span elements, i am expecting the words to wrap, but the element also wrap.

In this fiddle you can clearly see that the span element with class message is behind the element name. I would like these elements inline but with a word wrapping for the second with class message.

What I am trying to achive could be compared to twitch.tv chat messages structure.

The twitch.tv HTML for a message is the following:

<li class="ember-view message-line chat-line" id="ember6565">
  <div class="indicator"></div>
  <span class="timestamp float-left">3:34</span> 
  <span class="badges float-left"></span>
  <span class="from" style="color:#D2691E">yourusername</span>
  <span class="colon">:</span> 
  <span class="message" style="undefined">message here</span>
</li>

Regards

Answer 1

Maybe the following might be what you need.

I added white-space: nowrap to the li elements to keep the inline child elements on one line.

You then need to add white-space: normal to the .message span to keep the break-word-wrapping the way you need it. Remember that white-space is inherited, so you need to reset it to normal for the inline span.

.messages {
  list-style-type: none;
  width: 100px;
  border: 1px dotted blue;
  margin: 0;
  padding: 0;
}
.messages li {
  white-space: nowrap;
}
.messages li .message {
  white-space: normal;
  word-wrap: break-word;
  background-color: tan;
}

<ul class="messages">
  <li>
    <span class="name">wILL</span>
    <span class="message">sakdjfhskdjhfksjahflkjhldkjsakljfhalskdfhqweqweqeqeqweqweqweqweqweqwe</span>
  </li>
</ul>