如何用纯CSS确保行内块图标与段落最后文本同行显示？

可以通过将最后一个单词和图标绑定为一个不可换行的内联单元来实现，完全不需要JavaScript。具体实现如下：

调整HTML结构 #

把段落最后一个单词和图标放在同一个<span>容器中，让它们成为一个排版整体：

<div class="resizable">
  Lorem ipsum dolor sit <span class="nowrap-group">amet<span class="icon"></span></span>
</div>

编写CSS样式 #

给这个容器添加white-space: nowrap属性，强制内部内容不拆分换行，同时保持图标为内联块级元素：

.resizable {
  border: 1px solid black;
  resize: both;
  overflow: hidden;
  width: 11.5rem;
}

.icon {
  width: 10px;
  height: 10px;
  background-color: blue;
  display: inline-block;
  margin-left: 4px; /* 可选：给图标和单词添加间距 */
}

.nowrap-group {
  white-space: nowrap;
}

原理说明 #

white-space: nowrap会阻止容器内的内容自动换行，因此最后一个单词和图标会始终保持在同一行。当容器宽度足够时，它们和前面的文本正常排列；当容器宽度缩小到只能容纳前面的文本时，这个整体会一起换行到下一行，绝不会出现图标单独占一行的情况。

如果不想大幅修改原有结构，也可以通过消除元素间空白+设置同行不换行的方式实现（需注意HTML中元素间的换行空格问题）：

<div class="resizable">
  <span>Lorem ipsum dolor sit amet</span><span class="icon"></span>
</div>

.resizable {
  border: 1px solid black;
  resize: both;
  overflow: hidden;
  width: 11.5rem;
  /* 消除元素间空白 */
  font-size: 0;
}
.resizable span {
  font-size: 1rem; /* 恢复文本字号 */
}
.icon {
  width: 10px;
  height: 10px;
  background-color: blue;
  display: inline-block;
  margin-left: 4px;
}
/* 强制最后一个文本span和图标同行 */
.resizable span:last-child {
  white-space: nowrap;
}

不过这种方式对HTML结构的空白符要求较高，推荐第一种结构调整的方案，稳定性更强。

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