flex布局下长文本未自动换行出现横向滚动条该如何处理

问题原因 #

使用flex布局时，弹性项的默认min-width属性值为auto，会优先保证内容完整展示不被压缩，因此即使设置了overflow-wrap: break-word也不会生效，长无空格字符串会直接撑开容器宽度，最终导致页面出现横向滚动条。

修复方案 #

方案1（基础适配） #

给flex容器添加min-width: 0覆盖默认值即可让换行属性生效，修改后的CSS代码如下：

.block {
  display: flex;
  overflow-wrap: break-word;
  min-width: 0; /* 新增该行覆盖默认的auto值 */
}

方案2（强适配无空格长文本） #

如果内容大多是连续无空格的长字符串（如长串字符、无截断链接等），可以额外添加word-break: break-all保证强制换行，适配性更强：

.block {
  display: flex;
  overflow-wrap: break-word;
  word-break: break-all;
  min-width: 0;
}

如果需要极端场景下的兜底，还可以给容器的父级元素添加overflow-x: hidden，避免意外溢出产生横向滚动条。

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