如何仅用CSS实现中间元素内容溢出时换行分离（非float方案）

现有初始布局结构：

<div>
  <div>Short dynamic text.</div>
  <div id="in-between">Possible long dynamic text...</div>
  <div>Short dynamic text.</div>
</div>

需求要求：

• 允许预先调整元素顺序、类型或添加辅助元素，但不可动态修改DOM结构
• 所有文本不换行，且不设置固定宽高
• 仅通过CSS实现：当中间元素内容无法与左右元素在同一行容纳时，自动将中间元素独立到新行
• 同时咨询：是否存在或未来会出现不使用float属性的实现方案

演示测试代码 #

初始尝试的CSS #

.example {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  justify-content: space-between;
}

.example .separate {
  flex-grow: 1;
}

.example .long-b {
  order: 1; /* 希望能自动触发该逻辑 */
}

/* 以下样式不可修改 */
.container {
  border: 0.5rem solid black;
  background: blue;
}

.element {
 border: 0.5rem solid yellow;
 padding: 0.5rem;
 color: white;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.short-a:before {
  content: "only three words";
}

.short-b:before {
 content: "flag";
}

.short-c:before {
  content: "i love stackoverflow";
}

.short-d:before {
 content: "attribute";
}

.long-a:before {
  content: "i am not that long";
}

.long-b:before {
  content: "i am very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long";
}

对应HTML结构 #

<div class="container example">
  <div class="element short-a"></div>
  <div class="element separate long-a"></div>
  <div class="element short-b"></div>
</div>
<br />
<div class="container example">
  <div class="element short-c"></div>
  <div class="element separate long-b"></div>
  <div class="element short-d"></div>
</div>

解决方案（无float版本） #

可以通过Flexbox布局结合灵活的flex属性配置实现需求，完全不需要依赖float。

修正后的CSS代码 #

.example {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  align-items: center;
}

/* 左右短元素：保持自身内容宽度，不被压缩或拉伸 */
.example .element:not(.separate) {
  flex: 0 0 auto;
}

/* 中间元素：空间足够时填充剩余宽度，空间不足时独占一行 */
.example .separate {
  flex: 1 0 calc(100% - 2rem); /* 2rem为左右元素最小宽度+间隙的预估，可根据实际调整 */
  min-width: 0; /* 解除Flex元素的最小宽度限制，确保能触发换行 */
}

/* 以下原有样式保留 */
.container {
  border: 0.5rem solid black;
  background: blue;
}

.element {
 border: 0.5rem solid yellow;
 padding: 0.5rem;
 color: white;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.short-a:before {
  content: "only three words";
}

.short-b:before {
 content: "flag";
}

.short-c:before {
  content: "i love stackoverflow";
}

.short-d:before {
 content: "attribute";
}

.long-a:before {
  content: "i am not that long";
}

.long-b:before {
  content: "i am very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long";
}

原理说明 #

1. Flex容器设置flex-wrap: wrap，允许元素在空间不足时换行
2. 左右短元素通过flex: 0 0 auto固定自身宽度，避免被压缩或拉伸
3. 中间元素通过flex: 1 0 calc(100% - 2rem)实现自适应：
   • flex-grow:1：容器空间足够时，填充左右元素之外的剩余宽度
   • flex-basis: calc(100% - 2rem)：当容器宽度不足以容纳三个元素时，中间元素的基准宽度设为接近满宽，触发换行逻辑
   • min-width:0：解除Flex元素默认的最小宽度限制，确保换行逻辑能正常触发

非float方案的相关说明 #

目前已经有成熟的非float实现方案，就是上述的Flexbox布局，这是当前前端主流的自适应布局方案，完全替代了float在这类场景中的应用。

未来的CSS规范中，CSS Grid布局也可以实现类似效果，甚至更灵活：比如通过min()/max()函数结合网格轨道的自适应调整，不过当前Flexbox已经能很好地满足这类需求。

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