Как использовать неиспользуемое пространство перед элементом inline-block-default, например <button>?

Вот пример HTML и CSS, чтобы показать проблему:

<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; }

Попробуйте в этом JSFiddle, изменив размер области вывода.

Результат (в Chromium on Ubuntu):

Как вы можете видеть, в третьем примере разрыв строки перед <button>, который я пытаюсь избежать. Символ   кажется, будто он игнорируется (рассматривается как обычное пространство). Желаемый результат состоит в том, что между "this" и "is" нет разрыва, как и в первых двух примерах.

Я уже нашел Почему встроенные блоки ломаются после неразрывного пространства?. Ответ там предлагает использовать <nobr> или white-space: nowrap. Однако:

Я устанавливаю <button> в display: inline, поэтому я даже не понимаю, почему проблема существует больше, поскольку это встроенный элемент.
Мне нужно чистое решение CSS, без лишнего HTML в тексте перед кнопкой. Мой HTML должен выглядеть примерно так:
```
<p>{{SOME TEXT}}&nbsp;<button>foo</button></p>
```
и я не знаю, будет ли {{SOME TEXT}} содержать пробелы или нет. Я могу добавить дополнительный HTML вокруг текста, но решение, связанное с ответом выше, требует добавления элемента внутри самого текста.

Почему проблема возникает даже при установке display: inline; и как я могу ее решить без изменения самого текста?

Ответ 1