How to prevent linebreaks after an inline image?

Question

I noticed that my browser may set a line break after an <img> tag, even if this image tag is followed by  :

<p style="width: 12ex; font-family:monospace;">
  12345678 <img style="width: 2ex" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/25px-Smiley.svg.png">&nbsp;123
</p>

The smiley should be on the second line, because the image tag is followed by nbsp;. I can force this behavior by adding a <span> with white-space: nowrap:

<p style="width: 12ex; font-family:monospace;">
 12345678 <span style="white-space: nowrap"><img style="width: 2ex" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/25px-Smiley.svg.png">&nbsp;123</span>
 </span>
</p>

Is there a solution without adding an additional <span> tag? For example: Is there a CSS statement for <img> to prevent line breaks after it?

Note: The CSS of the <p> should not be altered. I only use it to simulate the problem.

Answer 1

Yea, just use css's display: inline-block

img {
    display: inline-block;
}

<p style="font-family:monospace;">
  sometext<img style="width: 2ex" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/25px-Smiley.svg.png">&nbsp;sometext
</p>

Just make sure the p is wide enough, so it doesn't need to wrap. (I removed the width style)

This doesn't appear to work in Firefox 33.