Does multi-line range behave like a block?

Question

I have a problem with two spaces in a div. I need to make sure that the second span starts on the same line as the first. I managed to get it working 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 mistake. According to spec :

This property indicates the possibilities of soft packaging between letters, i.e. where it is "normal" and valid for breaking lines of text.

The soft packaging of an inline element is based on the width of the ancestor of its block element. As a rule, this happens where there is a place or a certain punctuation. (Add an exclamation point or question mark randomly in Ws and it will break.)

The word-break: line-break spec states that soft packing can be performed between two letters, and this property applies to “all elements”. However, it seems to work for block-level elements only in IE.

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

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

Fiddle

Answer 2

This is due to the differences between how the browser implements word wrap. Ironically, IE is doing the right thing in this case.

It will behave the same everywhere if the container was wide enough, or if your second span had spaces.

If you want to suppress word wrap, put both spaces in the nowrap element together, but this will cause the spaces to overflow their container when their container is not wide enough.