Question

我注意到我的浏览器可能会在<img>代码后设置换行符，即使此图片代码后跟 ：

＆＃13;

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

＆＃13;

笑脸应位于第二行，因为图片标记后跟nbsp;。我可以通过<span>添加white-space: nowrap来强制执行此操作：

＆＃13;

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

＆＃13;

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

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

Answer 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中似乎不起作用。

Answer 2

＆＃13;

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

＆＃13;

Answer 3

根据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版本（请参阅bug 139723和bug 172819了解类似的Firefox错误）。

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

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

3 个答案: