Wort Prevent bricht, wenn Bild in der Mitte des Wortes

Question

Laut dem Web-Seite Design ist, gibt es ein Bild anstelle von „O“ Brief verwendet (manchmal).
Das Problem: wenn das Fenster verkleinert wird, wird manchmal als Teil des Wortes nach Bild, um neue Linie geht
Wunschverhalten: ganzes Wort neue Linie gehen soll, wenn es nicht passend ist.
Ja, ich kann diese Worte mit <span> Tag mit CSS-Regel wickeln white-space: nowrap aber es ist keine wünschenswerte Lösung, da Client diese in der Lage sein will visuellen Editor in Wordpress zu bearbeiten.
Irgendwelche Ideen, um zu verhindern, dass Wort mit Bild darin bricht?
https://jsfiddle.net/jas1rmwx/ - Größe des Fensters ändern, um das Problem zu sehen.

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

Sieht aus wie Sie NOBR Tag brauchen:

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/

Ich bin mir nicht sicher, wie es‘ s wird von den mobilen Browsern unterstützt.

ich für die Textformatierung sieht eine andere Lösung nicht. Sie können auch die Worte als Inline-Block machen und schweben

links

UPDATE: inline-block Lösung:

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/