How to prevent the appearance of lines after the embedded image?

Question

I noticed that my browser can set a line break after the <img> , 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 emoticon should be on the second line, because the image tag is followed by nbsp; . I can get this behavior to add <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> ? For example: is there a CSS statement for <img> to prevent line breaks after it?

Note. CSS <p> should not be changed. I use it only to simulate a problem.

Answer 1

Like Cerbrus , you can use display: inline-block for the <img> :

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

This works for Chromium 36 and 38 (and possibly for any other webkit browser).

Unfortunately, it does not work for the current version of Firefox 33, and also not for the current nightly version of Firefox (see also error 139723 and error 172819 for similar Firefox errors).

Sitenote: I answered my question because this offer was rejected .

Answer 2

Yes, just use css 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 p is wide enough so you don't have to wrap it. (I removed the style width )

This does not work in Firefox 33.

Answer 3

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