如何防止内联图像后的换行符？答案

【问题标题】：How to prevent linebreaks after an inline image?如何防止内联图像后的换行符？
【发布时间】：2014-10-27 15:26:50
【问题描述】：

我注意到我的浏览器可能会在<img> 标记后设置换行符，即使此图像标记后跟&nbsp;：

<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;。我可以通过添加 和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>

是否有不添加额外 标签的解决方案？例如：<img> 后面有没有 CSS 语句防止换行？

注意： 的 CSS 不得更改。我只是用它来模拟问题。

【问题讨论】：

标签： javascript html css image line-breaks

【解决方案1】：

是的，只需使用 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>

只要确保p 足够宽，就不需要换行。（我删除了width 样式）

这似乎不适用于 Firefox 33。

【讨论】：

感谢您的回答，但它对我不起作用。见this jsfiddle。我在图片标签中添加了display: inline-block;（后面是&nbsp;），但是它之后仍然会出现换行符......（笑脸应该在第二行）
我猜您的代码示例仅有效，因为您从  标记中删除了 width 样式。但是这个声明对于模拟换行的需要是必要的（如果 标记足够宽以将整个文本放入其中，我们看不到图像的换行行为......）。这就是为什么我不赞成你的回答......
其实that fiddle you linked中的笑脸对我来说在第二行。你用的是什么浏览器？
Firefox 33.0 版你是对的：在我的 chromium 浏览器上，笑脸在第二行... Firefox 中的错误？！
只有在您编辑后，我才能为您的答案投票。所以也许添加一个注释，它不适用于当前的 firefox 33.0 版本......

【解决方案2】：

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

【讨论】：

为什么还要在 标签中添加display:inline？
我刚刚测试了它：只有在为周围的 标签设置了display:inline; 时，您的代码才有效。但通常情况下， 标记的内联行为不是有意的......（这就是为什么我不赞成你的回答——无论如何谢谢;-)）
抱歉，我有点忙。编辑它
没有问题。不幸的是，问题仍未解决（请参阅我的 cmets 对 Cerbrus 的回答）

【解决方案3】：

正如Cerbrus 建议的那样，在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（另请参阅 bug 139723 和 bug 172819 以了解 Firefox 的类似错误）。

Sitenote：我回答了我自己的问题，因为this suggested edit was rejected。

【讨论】：