如何在保持display:inline-block时阻止HTML元素与后续文本换行

我有一段包含span元素的长段落（示例仅保留一个），需要让该span元素与其后的文本保持在同一行（该元素是后续文本的引导标识）。要求保持span元素为display:inline-block，同时阻止它与后续文本之间出现换行。之前尝试用 无效，使用white-space: nowrap会导致整个段落的其余文本无法换行。

原代码示例 #

CSS #

span#outerSpan {
  width: 0;
  display: inline-block;
  /* 不能删除这个浮动，我需要它右浮动且不占用空间 */
  float: right;
}

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

HTML #

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

解决方案 #

只需要给span和它后面的目标文本单独设置一个不换行的范围，就能实现需求，同时不影响段落其他内容的正常换行：

• 用一个行内容器（比如span）把<span id="outerSpan">和紧随其后的文本包裹起来
• 给这个容器添加white-space: nowrap样式，限定只有容器内的内容强制不换行
• 原span的所有样式保持不变

修改后的代码 #

CSS

span#outerSpan {
  width: 0;
  display: inline-block;
  float: right;
}

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

/* 新增的包裹容器样式 */
span.no-wrap-group {
  white-space: nowrap;
}

HTML

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

这样处理后，只有包裹容器内的span和后续文本会强制在同一行显示，段落的其他部分依然按照原有的换行规则自动换行，完全符合要求。

内容的提问来源于stack exchange，提问作者Awes