<ul>
    <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>
</ul>

我使用：after伪元素附加一个图标：

ul li.completed a:after {
    background:transparent url(img.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
}

问题：如果可用宽度太小，图标会换行到下一行。我希望它保持在与它附加到的链接的最后一个字的同一行：

这是可行的，没有添加“nowrap”到整个链接(我想要的词，只是不是图标)。

参见jsFiddle here。