Prevent word break when image is in the middle of a word

Question

In accordance with the design of the web page, an image is used instead of the letter "O" (sometimes).
Problem: when resizing the window, sometimes the part of the word after the image goes to a new line.
Desired behavior: the whole word should go to a new line if it does not fit.
Yes, I can wrap these words with a tag <span>using the css rule white-space: nowrap, but this is not a desirable solution, because the client wants to be able to edit this in the Wordpress visual editor.
Any ideas on how to prevent word breaks with the image inside?
https://jsfiddle.net/jas1rmwx/ - resize the window to see the problem.

p {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

img {
  vertical-align: middle;
}

<p>This is the looooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooong woooooooooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooord</p>

Run codeHide result

Answer 1

, nobr:

p {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

img {
  vertical-align: middle;
}

<p>This is the <nobr>looooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooong</nobr> <nobr>woooooooooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooord</nobr></p>

Hide result

https://jsfiddle.net/jas1rmwx/1/

, .

. inline-block float left

UPDATE: :

div {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}
img {
  vertical-align: middle;
}
.nobr {
  display: inline-block;
}

<div>This is the 
<div class="nobr">
 looooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooong</div>
<div class="nobr">woooooooooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooord</div></div>

Hide result

https://jsfiddle.net/jas1rmwx/8/