css - Why do inline-blocks break after non-breaking space?

Question

Some HTML code:

<p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

<p>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

Some CSS:

#one span {
  display: inline-block;
}

p {
  font-family: Arial;
  font-size: 16px;
  width: 200px;
}

The second paragraph behaves as I expect it.

The first however behaves differently, due to the span being an inline-block.

My question is, why does the inline-block span ignore the   and break line between the span and the preceding word?

Thanks!

Example fiddle here.

Answer 1

So, it looks like the behavior isn't consistent across browsers:

• In IE11 and the last few versions I've been able to test this on, whether the span is an inline box or an inline-block box, IE respects the no-break space and does not separate the span from its preceding word.

• In all other browsers, the behavior is as described in the question. The no-break space appears to be ignored when the span is an inline-block; instead, it gets forced onto its own line and separated from its preceding word. Note that the no-break space is still there; it appears at the end of the first line, just after the word, which can be seen by highlighting the line in Firefox.

The explanation given by some others here seems rather sound: an inline-block is formatted like a block box, except laid inline, so that could be a reason why it doesn't always behave the same as an inline box. However, I haven't been able to find anything in the specification that confirms this. Nor does it explain why IE behaves the way it does, or indeed, whether IE is behaving incorrectly or just differently.

The CSS2.1 spec does state the following in section 9.2.2, which lends itself quite well to the above explanation:

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

But it does not fully describe the interaction between line breaks and atomic inline-level boxes, let alone the effect a no-break space would have on this interaction. So, unfortunately, there does not appear to be a sufficient explanation for the behavior of any one browser.

---

I've even looked in the CSS3 Text module, but all it has to say with respect to line breaks and atomic inlines is this:

• The line breaking behavior of a replaced element or other atomic inline is equivalent to that of the Object Replacement Character (U+FFFC).

... and when I try it with a U+FFFC, the results are completely unreliable:

<p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

<p>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

<p>Hello World how are you.&nbsp;&#xfffc;</p>

Namely:

• IE behaves most consistently, breaking all three paragraphs the same way.

• Firefox breaks the line with the character the same way as it does the second paragraph, respecting the no-break space.

• Chrome does not even attempt to render the character.

Maybe I'm just misunderstanding the quote from the CSS3 Text module, maybe browsers aren't implementing certain control characters correctly, I can't say for certain. But, if anything, I'm starting to doubt that this behavior is really defined in any CSS specification at all.