CSS布局需求：如何让span2与文本同行，允许文本换行但图片不单独成行

首先修正你的HTML结构为合法标准标签（自定义标签如<span1>不符合HTML规范）：

<div class="content-group">
  这里是可能较长的文本内容，比如xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  <span class="icon-group">
    <img src="icon1.png" alt="图标1">
    <img src="icon2.png" alt="图标2">
  </span>
</div>

通过以下CSS实现需求：

/* 外层容器：支持内部元素换行，同时保持行内排版特性 */
.content-group {
  display: inline-block;
  /* 强制文本可在任意字符处换行，确保最后一行至少有一个字符和图标组同行 */
  word-break: break-all;
}

/* 图标组容器：内部图片不拆分换行，保持与文本的行内流关联 */
.icon-group {
  white-space: nowrap;
  display: inline;
  /* 可选：和文本保持间距 */
  margin-left: 6px;
}

/* 可选：让图标与文本垂直居中对齐 */
.icon-group img {
  vertical-align: middle;
}

原理说明 #

• word-break: break-all 避免长单词或长文本导致图标组被单独挤到下一行，确保文本能在任意位置换行；
• white-space: nowrap 保证图标组内的两张图片始终处于同一行，不会被拆分；
• display: inline-block 让外层容器既支持内部元素自动换行，又保留行内元素的排版特性。

最终效果：

1. 文本较短时，图标组与文本完全在同一行；
2. 文本较长时，文本自动换行，但图标组始终和最后一行的文本（至少一个字符）处于同一行，绝不会单独成行。

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