Flexbox布局：固定右侧子元素不换行，左侧长文本自动换行适配容器

嘿，这个场景我经常遇到！你用word-break: break-word的思路完全正确，咱们可以把这个方案打磨得更完整，确保在各种情况都能稳定工作～

首先先把基础的布局结构摆出来，方便理解：

<div class="container">
  <div class="left">这里是可能超级长的标签文本，比如像这样的连续字符串xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
  <div class="right">
    <span class="status-icon">🔴</span>
    <span class="status-icon">🟢</span>
    <span class="status-icon">🟡</span>
    <!-- 任意数量的状态图标/元素 -->
  </div>
</div>

对应的CSS应该这么写：

.container {
  display: flex;
  /* 可选：给容器加个最大宽度或者固定宽度，模拟实际场景 */
  max-width: 400px;
  border: 1px solid #eee;
}

.left {
  flex: 1; /* 关键：让左侧元素占据容器剩余空间 */
  word-break: break-word; /* 你已经用到的，强制长文本换行 */
  /* 可选：加个内边距让排版更舒服 */
  padding-right: 10px;
}

.right {
  white-space: nowrap; /* 关键：让右侧元素强制单行显示，不折行 */
  align-self: center; /* 可选：让图标和左侧文本垂直居中 */
}

每个属性的作用拆解： #

• container的display: flex：开启弹性布局，让两个子元素默认在一行排列，这是整个方案的基础。
• .left的flex: 1：这一步很重要，它会让左侧元素自动填充容器剩下的所有空间，确保右侧元素的宽度完全由自身内容（图标数量）决定，不会被左侧长文本挤压变形。
• .left的word-break: break-word：不管文本是有空格的普通段落，还是无空格的超长字符串（比如长URL、编码串），都能在合适的位置强制换行，避免内容溢出容器。
• .right的white-space: nowrap：彻底禁止右侧元素内的内容折行，不管有多少个状态图标，都会保持在同一行显示。

补充小细节： #

如果你的.left文本是普通的带空格文本，用overflow-wrap: break-word也能达到类似效果，但word-break: break-word对无空格长文本的兼容性和处理效果更好，所以你的初始选择非常棒～

这样写出来的布局，不管左侧文本多长、右侧图标数量多少，都能保证：右侧单行不折行，左侧自动换行适配剩余空间，整个容器不会出现溢出问题。

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