How can I use a non-breaking space before an inline-block-default element, such as a <button>?

Question

Here's some example HTML and CSS to show the problem:

<p>thisssssssssssss&nbsp;issssssssss a test</p>
<p>thisssssssssssss&nbsp;<span>isssssssssss another</span> test</p>
<p>thisssssssssssss&nbsp;<button>isssssssssss another</button> test</p>

button { display: inline; }

Try it out on this JSFiddle, by resizing the output area.

Result (in Chromium on Ubuntu):

As you can see, there is a line break before the <button> in the third example, which I am trying to avoid. The   character seems as if it is being ignored (treated as a regular space). The desired result is that there is no break between "this" and "is," just like the first two examples.

I've already found Why do inline-blocks break after non-breaking space?. An answer there suggests using <nobr> or white-space: nowrap. However:

• I'm setting the <button> to display: inline, so I don't even understand why the problem exists anymore since it's an inline element.

• I need a pure CSS solution, without any extra HTML in the text before the button. My HTML has to look something like this:

  <p>{{SOME TEXT}}&nbsp;<button>foo</button></p>
  

  and I don't know whether the {{SOME TEXT}} will contain spaces or not. I can add extra HTML around the text, but the solution linked in the answer above requires adding an element within the text itself.

Why is the problem happening even when setting display: inline;, and how can I solve it without modifying the text itself?

Answer 1

Can you put a span before the nbsp?

<p>thisssssssssssss<span id="b">&nbsp;<button>isssssssssss anotherrrrrrrrr</button></span> test</p>

#b {
    white-space: nowrap;
}

http://jsfiddle.net/bggk33du/10/