単語の途中に画像があるときに単語が壊れないようにする

Question

ウェブページのデザインによれば、 "O"文字（時には）の代わりに使われる画像があります。
問題：ウィンドウのサイズを変更すると、画像の後の単語の一部が新しい行に移動することがあります。
希望の動作：完全な単語は、適合していない場合は新しい行に移動します。
はい私はこれらの単語をCSS規則white-space: nowrapの<span>タグで囲むことができますが、クライアントはWordpressのビジュアルエディタでこれを編集できるようにしたいので、望ましい解決策ではありません。
イメージ内の単語が壊れるのを防ぐ方法に関するアイデアはありますか？
https://jsfiddle.net/jas1rmwx/ - ウィンドウのサイズを変更して問題を確認します。

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>

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>

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

を私はどのようにそれがわからないんだけどモバイルブラウザでサポートされています。

テキスト形式の他の解決策はありません。クライアントが「できるなら、私は、と思い

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>

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