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

Question

Some HTML code:

Hello World how are you. Entrepreneur         


        

Answer 1

There does not seem to be any rigorous answer in the specifications, since HTML and CSS specs do not define exact rules for line breaking. HTML 4.01 says: “Sometimes authors may want to prevent a line break from occurring between two words. The   entity (  or  ) acts as a space where user agents should not cause a line break.” But it does not really require that browsers must obey that.

Browsers that do not treat   as preventing a line break before an inline-block can justify this by saying that   just stands for the NO-BREAK SPACE *character, which is defined (in Unicode) as preventing line breaks when it appears between characters. Here it sits between a character and an inline-block element, which is (informally speaking) to be taken as a black box in line formatting, i.e. it occupies some space but isn’t treated as a character or as containing characters.

Note that the situation is the same if you remove the  . A string like “you.Entrepreneur” is not broken, but if you make “Entrepreneur” an inline block, the string may break.

Similar considerations apply to images. Browsers may not honor   between text and an image, because here, too, NO-BREAK SPACE does not appear between characters.

You can still prevent line breaks, but you need to be more explicit, e.g.

Hello World how are you. Entrepreneur

I’m using nobr in the example for simplicity. You can instead use a standard element and set white-space: nowrap on it (this CSS property, despite its name, does not only affect whitespace handling; this setting prevents line breaks in the content).