如何在内嵌图像后防止换行？

Question

我注意到我的浏览器可能会在<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>

笑脸应该在第二行,因为图像标签后面跟着nbsp;.我可以通过添加<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>

有没有添加额外<span>标签的解决方案？例如:是否有一个CSS语句<img>来防止它之后的换行？

注意:<p>不应更改CSS的CSS .我只用它来模拟问题.

Answer 1

正如Cerbrus所建议的， on 可以使用display: inline-block标签<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>

这适用于 Chromium 36 和 38（也可能适用于任何其他 webkit 浏览器）。

不幸的是，它不适用于当前版本的 Firefox 33，也不适用于当前的每晚版 Firefox（另请参阅错误 139723和错误 172819，了解 Firefox 的类似错误）。

Sitenote：我回答了我自己的问题，因为这个建议的编辑被拒绝了。