如何保持图像与段落中的最后一个字一致

Question

我有一个以图像结尾的句子：

<p>This is a long word This is a long word This long<img src="images/fancy-r.png"></p>

当句子太长时，图像会自动结束新行，如下图所示。这句话是动态生成的，所以我无法预测它的长度。是否有办法始终使用CSS或JQ将图像与最后一个单词“混为一谈”（这样它永远不会自己）？ 我知道如何使用背景图像解决这个问题，但我想避免这种情况。需要IE9 +支持。

编辑：我需要能够包装段落。

Answer 1

我最初的CSS解决方案在IE中没有用，所以这里有一个更新的解决方案，也只支持CSS。在IE9,10和11，Firefox 31和32，Chrome 32和36中进行了测试。

您需要将图片打包在<span> white-space:nowrap以及其他一些属性中。

<强> HTML：

<p>
    This is a long word This is a long word This long<span class="stay-together"><img src="images/fancy-r.png"></span>
</p>

<强> CSS：

.stay-together {
    white-space: nowrap;
}

span:before {
    /* 
     * Chrome requires some content (empty is OK).
     * IE9 needs at least a space character.
    */
    content: " ";
    /* IE9 needs font-size to be greater than 0: */
    font-size: 1px;
}

请参阅此jsfiddle example。

Answer 2

使用CSS-Only（我知道）的唯一方法是将文本和图像包装在其自己的范围内：

<p>This is a long word This is a long word This 
  <span class="nowrap">long <img src="images/fancy-r.png"></span>
</p>

然后将CSS应用于它：

.nowrap
{
  white-space: nowrap;
}

JsFiddle Example