私はこの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 を参照してください。