无空格长文本（如URL）溢出文本容器不自动换行的解决方法

浏览器默认文本换行规则，只在空格、连字符、标准标点这类预设的合法断位拆分内容。遇到无任何断位标识的连续长内容（比如无空格的长URL、连续长串英文字符/数字）时，浏览器默认不会主动从内容中间截断换行，最终内容宽度会超出文本容器边界，出现溢出。
如果是flex、grid布局下的文本块，子项默认min-width: auto的规则会加重这个问题：哪怕内容有可断行的空格，也可能因为子项最小宽度跟随内容撑开，导致整体布局溢出。

直接给文本容器配置基础兜底样式，就能覆盖绝大多数溢出场景：

• 通用场景优先用overflow-wrap: break-word（兼容老旧浏览器可追加别名属性word-wrap: break-word）。这个属性只有当连续长内容正常摆放超出容器宽度时，才会从内容内部强制断行，不会拆分正常的英文单词、不破坏普通语句的换行逻辑，阅读体验最好，适合全局配置：

p, .common-text-block {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

• flex、grid布局内的文本子项，必须追加min-width: 0配置，覆盖默认的min-width: auto规则，避免布局层面的宽度撑开问题：

.flex-child .text-block {
  min-width: 0;
  overflow-wrap: break-word;
}

• 按业务场景选配套规则：
  • 对单词完整性要求不高的密集文本流场景，可以用word-break: break-all，内容触达容器宽度就直接断行，规则更强硬，但会从中间截断普通英文单词，不建议全局使用
  • 单行展示的文本如果不需要换行，可以用省略号样式做兜底，避免溢出：

  .single-line-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  

• 避坑：不要给中文文本容器加word-break: keep-all，这个规则会让中文和英文一样只在空格、标点位置断行，大段无空格的中文内容会直接撑破容器。

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