相关疑难解决方法(0)

我有这个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 .

给定一个具有可变长度文本的内联（或内联块）元素，以及第一个元素右侧的另一个元素充当一种徽章，是否有一种方法可以防止第一个元素的最后一个单词之间出现换行符元素和第二个元素？两个元素占据同一行就可以了；第一个元素的文本中出现换行也可以；但两个元素之间的换行符是不可取的。这是一个解释我的意思的插图。

有没有办法做到这一点？我尝试将这两个元素作为跨度，并在它们之间放置一个不间断的空格，但这不起作用。

更新：这是一个快速而肮脏的 Codepen 示例：http://codepen.io/anon/pen/LkzBQJ

html:

<h1>\n  <span class="title-text">\n    This is some text\n  </span><span class="badge">yo!</span>\n</h1>\n<h1>\n  <span class="title-text">\n    This is some broken text\n  </span><span class="badge">yo!</span>\n</h1>\n

CSS：

h1 {\n  width: 350px;\n}\n\n.badge {\n  color: #f6511d;\n  display: inline-block;\n  border: 1px solid #f6511d;\n  border-radius: 3px;\n  font-size: 0.8em;\n  padding: 0.1em 0.2em;\n  line-height: 0.97em;\n  margin-left: 0.4em;\n  vertical-align: 1px;\n}\n

UPDATE2：在我的特定情况下，第一个元素中的文本和徽章都必须使用 JavaScript 动态呈现。因此，下面的 Ricardo\xe2\x80\x99s 解决方案（将文本的最后一个单词和徽章用 包裹在一个跨度中white-space: nowrap）虽然有效，但实现起来并不容易。