如何实现Span元素无法容纳于当前行时整体换行？

问题背景：
现有如下代码结构：

<div> 
  <span> first thing here </span> 
  <span> second thing here </span> 
  <span> third thing here </span> 
</div>

需求是让这些span在一行排列，但第三个span没法完整塞下当前行时，整个span直接换行，绝对不能拆分span里的内容。请问该怎么实现？需要用JS判断剩余空间吗？

嘿，完全不用写JavaScript！纯CSS就能完美解决这个需求，浏览器本身就有能力处理这种流式布局场景，给你两种简单靠谱的实现方式：

方法一：Flexbox布局（推荐） #

Flexbox是现在布局的首选方案，逻辑清晰还好用。它默认会让子元素在一行排列，只要给容器加个flex-wrap: wrap，空间不够时子元素就会自动换行，而且每个span作为独立的flex项，天然不会被拆分。

代码示例：

/* 给外层div加个类名方便样式控制 */
.span-container {
  display: flex;
  flex-wrap: wrap; /* 关键：空间不足时自动换行 */
  gap: 10px; /* 可选：给span之间加个小间距，看起来更舒服 */
}

/* 可选：如果不想span被压缩，可以加这行 */
.span-container span {
  flex-shrink: 0;
}

对应的HTML：

<div class="span-container"> 
  <span> first thing here </span> 
  <span> second thing here </span> 
  <span> third thing here </span> 
</div>

方法二：inline-block + white-space（传统方案） #

如果项目里需要兼容老浏览器，用传统的内联块元素也能实现，核心是保证span是一个不可拆分的整体：

.span-container {
  width: 100%; /* 让容器占满可用宽度 */
}

.span-container span {
  display: inline-block; /* 让span变成内联块，既能在一行排列，又能保持整体 */
  white-space: nowrap; /* 强制span内的文本不换行，确保整个span是一个完整单元 */
  margin-right: 10px; /* 可选：添加间距 */
}

这种方式下，inline-block的span会像普通文本一样流式排列，当容器宽度不够时，整个span会被挤到下一行，绝对不会拆分内容。

为啥不用JS？ #

上面两种CSS方案都能让浏览器自动感知容器的剩余空间，完全不需要你手动写JS去计算宽度或者判断位置。浏览器本身就具备流式布局的能力，我们只需要通过CSS告诉它「这些span是不可拆分的整体，空间不够就整体换行」就行啦～

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