Flex容器内div2长单词换行：避免break-all拆分短单词

我来帮你搞定这个问题！你需要的是既能让长单词自动换行、又不拆分短单词，同时保证子容器不超出父容器宽度的方案，下面是具体实现：

核心思路 #

用overflow-wrap: break-word替代word-break: break-all处理单词换行，再配合flex布局属性确保子元素宽度不超限：

• overflow-wrap: break-word：只有当单词长度超过容器宽度时才拆分换行，短单词会保持完整，刚好解决你不想拆分短单词的需求。
• max-width: 100%：强制子元素的最大宽度不超过父容器的150px限制。
• flex-shrink: 1：因为父容器是flex布局，这个属性让子元素在空间不足时自动收缩，避免超出父容器范围。

完整代码示例 #

#div1{ 
  display: flex; 
  max-width: 150px; 
  height: 100px;
}
#div2{ 
  background-color: gray; 
  overflow-wrap: break-word;
  max-width: 100%;
  flex-shrink: 1;
}
#div3{ 
  background-color: rgb(197, 181, 181); 
  max-width: 100%;
  flex-shrink: 1;
}
#div4{ 
  width: 150px; 
  background-color: rgb(144, 199, 172); 
}

<div id="div1"> 
  <div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="div3">这里可以放任意内容，宽度不会超过150px</div>
</div>
<div id="div4">参考容器（150px宽）</div>

效果说明 #

设置完成后：

• div2中的短单词aaaaaaaaaa会完整显示，过长的单词bbbbbbbbbbbbbbbbbbbbbbbbbb会被自动拆分换行。
• div2和div3的宽度始终不会超过父容器div1的150px限制，即使内容较多也会自动收缩或换行。

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