防止：后元素包装到下一行 [英] prevent :after element from wrapping to next line

问题描述

我有这个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伪元素附加图标：

I'm appending an icon using the :after pseudo element:

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

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

The problem: if the available width is too small, the icon wraps to the next line. I would want it to stay on the same line as the last word of the link it's appended to:

这是可行的，不需要在整个链接中添加nowrap

Is this doable, without adding 'nowrap' to the entire link (I want the words to wrap, just not the icon).

请参阅jsFiddle 此处

See jsFiddle here.

推荐答案

您可以将图片添加到最后一个词。

you can add the image to the last word instead. that will make it break together.

向单词添加一个类
< strong class =test> word< strong>

和 .test：after {...

http://jsfiddle.net/52dkR/

窍门也是使该类为 inline-block

如果你想保持下划线，请看这个。

and if you want to keep the underline see this.

http://jsfiddle.net/atcJJ/

add text-decoration：inherit;

这篇关于防止：后元素包装到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！