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"> 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"> 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.
As Cerbrus suggested, on can use display: inline-block to the <img> tag:
<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"> 123
</p>This works for Chromium 36 and 38 (and maybe also for any other webkit browser).
Unfortunately it does not work for the current release of Firefox 33 and also not for the current nightly version of Firefox (see also bug 139723 and bug 172819 for similar bugs of Firefox).
Sitenote: I answered my own question, because this suggested edit was rejected.