防止 html 元素后换行

Question

我有一个大段落，其中有一个 span 元素（有几个，但这里有一个是为了简化）。我想强制这个 span 元素与其后面的文本位于同一行（因为它是对该文本的介绍）。如何防止此元素与其后面的文本之间出现换行符（如何将这两个元素保持在一起），但将其保留为 display: inline-block？

我尝试使用nbsp，但它不起作用，并且使用whitespace: nowrap会阻止其余文本换行。

span#outerSpan {
  width: 0;
  display: inline-block;
  /* if you delete this and the float, it works, but I need it to be floated right and not take up space*/
  float: right;
}

div#box {
  border: 1px black solid;
  width: 140px;
  white-space: normal;
  overflow-wrap: anywhere;
}

<div id="box">aaaaaa aaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaa aaaaaa aaaaa aaaa a <span id="outerSpan"><span id="innerSpan">p</span></span>bb bbbbbbbbb bbbbbbb bbbbbbbbb bbbbbbbb bbbbbb bbbb</div>

Answer 1

内联块显示不能与浮动一起使用。 “由于浮动，内联块被忽略。如果'float'具有'none'以外的值，则框将浮动并且'display'被视为'block'”（从我的vscode复制）

还有为什么需要浮动？ float 是一个相当古老的标准，也许您可以使用更新的标准来实现相同的目标？ 也许如果你告诉我你想要做什么，我可以提供更好的方法来做到这一点:)