css - 防止 :after element from wrapping to next line

Question

我有这个 HTML:

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

Answer 1

JSFiddle - http://jsfiddle.net/Bk38F/65/

为伪元素添加负边距，以补偿其宽度:

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

现在，这将使图标溢出容器，只有当文本遇到行尾时，该行才会中断。如果需要保持图标在容器内原有的宽度，可以再次添加padding补偿:

ul li.completed a {
    display: inline-block;
    padding-right: 24px;
}

---

重要更新:

要使此方法起作用，文本和包含伪元素的元素的结束标记之间不能有空格。即使伪元素的宽度由负边距补偿，空白也会在遇到父元素的边缘时导致换行。例如，这有效:

<span>text goes here</span>

而这不会:

<span>
    text goes here
</span>