相关疑难解决方法(0)

假设文本在HTML页面上显示如下(只有一个单词太长而无法放在一行上):

Lorem ipsum dolores amet foo
bar

如何用CSS避免最后一个单词出现在最后一行,并强制两个(或更多)？

Lorem ipsum dolores amet
foo bar

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

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

更新：这是一个快速而肮脏的 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）虽然有效，但实现起来并不容易。