Css 防止元素的最后一个字和另一个元素之间出现换行

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

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

更新：下面是一个快速而肮脏的代码笔示例：

html:

---

UPDATE2:在我的特殊情况下，必须使用JavaScript动态呈现第一个元素中的文本和徽章。因此，里卡多下面的解决方案（将文本的最后一个字和徽章用

空格括起来：nowrap

）虽然有效，但实施起来并不容易。

解决方案：

我能想到的解决方案是创建某种修复，将带有徽章的文本包装在

span

中，并使用css属性

空白：nowrap




代码片段：


.row{
显示器：flex；
计数器重置：段落；
}
上校{
宽度：50%；
填充：1em；
}
上校--左{
背景色：#011627；
右边填充：0；
}
上校，对{
背景色：#F71735；
左边框：2个点#ddd；
}
上校{
颜色：#fff；
}
上校：以前{
反增量：段落；
内容：计数器（段落）”；
}
.徽章修复{
显示：内联块；
空白：nowrap；
}
.徽章{
显示：内联块；
填充物：2em.6em.3em；
字体大小：75%；
字号：700；
线高：1；
颜色：#fff；
文本对齐：居中；
空白：nowrap；
垂直对齐：基线；
边界半径：.25em；
}
.徽章-皇家蓝{
背景颜色：皇家蓝；
}
.徽章--西红柿{
背景色：番茄；
}
.徽章-深红色{
背景颜色：深红色；
}


这是一些文本
徽章


这是相当长的一段时间
徽章


这是一些较长的文本
徽章

检查这个！这行
这是一些文本哟必须在一行中才能工作

你能公布你的分数吗？一个解决方案可能是可行的，但标记会有所不同。@MarcAudet我添加了一个指向代码笔的链接，其中有一个我想到的示例。因此，你基本上是说，将文本的最后一个单词与徽章一起用class
空格：nowrap
括起来。当文本和徽章由javascript动态呈现时，这个解决方案似乎很难维护——代码需要找到文本的最后一个单词，将其包装在一个范围内，然后在该范围内呈现徽章。我真的希望有一个更干净的解决方案。您从未指定使用JS动态呈现文本和徽章…编辑您的问题如果这是一项要求，我的解决方案与当前指定的解决方案完美配合。为我的问题添加了另一个更新，以包括JS上下文。如果没有更干净的基于CSS的解决方案，我会接受你的答案。希望有，但我想不出纯CSS的任何其他方法。这就完成了工作，但关键不仅是单行标记，还有
h1{display:inline}
（它使默认块元素为内联）。请注意，它只与
内联
值一起工作，因此如果需要在badge元素上设置
宽度
，则必须使用padding hack。
<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>

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;
}