防止元素的最后一个单词与另一个元素之间的换行符

Question

给定一个带有可变长度文本的内联（或内联块）元素，以及作为一种徽章的第一个元素右侧的另一个元素，是否有办法防止最后一个单词之间的换行符第一个元素和第二个元素？占据同一条线的两个元素都很好;在第一个元素的文本中出现的换行也很好;但是两个元件之间的断线是不希望的。这是解释我的意思的插图。

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

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

HTML：

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

的CSS：

h1 {
  width: 350px;
}

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

UPDATE2：在我的特定情况下，必须使用JavaScript动态呈现第一个元素中的文本和徽章。因此，下面的里卡多解决方案（包含文本的最后一个字和带有white-space: nowrap的范围内的徽章）虽然有效，但实施起来并不容易。

Answer 1

<强> SOLUTION：

我可以提出的解决方案是创建某种修复方法，使用徽章包裹文本span并使用css属性white-space: nowrap;。

<强> JSFiddle

CODE SNIPPET

.row {
  display: flex;
  counter-reset: paragraph;
}
.col {
  width: 50%;
  padding: 1em;
}
.col--left {
  background-color: #011627;
  padding-right: 0;
}
.col--right {
  background-color: #F71735;
  border-left: 2px dotted #ddd;
}
.col p {
  color: #fff;
}
.col p::before {
  counter-increment: paragraph;
  content: counter(paragraph)". ";
}
.badge-fix {
  display: inline-block;
  white-space: nowrap;
}
.badge {
  display: inline-block;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
.badge--royalblue {
  background-color: royalblue;
}
.badge--tomato {
  background-color: tomato;
}
.badge--crimson {
  background-color: crimson;
}

<div class="row">
  <div class="col col--left">
    <p>
      This is <span class="badge-fix">some text
      <span class="badge badge--royalblue">badge</span></span>
    </p>
    <p>
      This is some <span class="badge-fix">reasonably long
      <span class="badge badge--tomato">badge</span></span>
    </p>
    <p>
      This is some <span class="badge-fix">longish text
      <span class="badge badge--crimson">badge</span></span>
    </p>
  </div>
  <div class="col col--right">

  </div>
</div>

Answer 2

检查此！ <h1>This is some text</h1><span class="badge">yo!</span>行必须在一行中才能工作。

https://codepen.io/lemonjelly/pen/rNNvLGE