Multiline span behaves like a block?

Question

I'm having a problem styling two spans in a div. I need to make sure second span starts on the same line as the first one. I was able to make it work in Chrome:

But here is what I get in IE:

Here is my code:

<div class="container">
  <span>7/2/2015</span>
  <span class="other">WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>
</div>

.container {
    width: 200px;
}

.other {
    word-break: break-all;
}

http://jsfiddle.net/alexarg/7q92t9m0/

Is there a way to make it work at least in IE 10? Thanks in advance.

Answer 1

This seems like a bug. According to the spec:

This property specifies soft wrap opportunities between letters, i.e. where it is “normal” and permissible to break lines of text.

Soft wrapping of an inline element is based on the width of its block element ancestor. Generally, that occurs where there's space or certain punctuation. (Add an exclamation point or question mark randomly in the Ws, and it will break.)

The word-break: line-break spec states that soft wrapping could occur between two letters, and that this property applies to "all elements." However, it seems to work for block-level elements only in IE.

You can solve this particular problem by moving word-break to the container:

.container {
  word-break: break-all;
}

Fiddle