overflow-wrap: break-word 仅在容器设 width 或 max-width 时生效；常见失效场景包括 flex 子项未设 min-width: 0、继承 white-space: nowrap、用于 pre 标签或表格单元格未设 table-layout: fixed；word-break: break-all 需慎用，keep-all 更适配中英文混排；pre 内换行需 pre-wrap + overflow-wrap；布局上下文（Flex/Grid/table/pre/white-space）会压制换行，须协同调整。

overflow-wrap: break-word 为什么没效果

它只在容器有明确宽度限制时才起作用，width 或 max-width 缺一不可。常见失效场景包括：

• 父元素是 display: flex 且子项没设 min-width: 0，子项会优先撑宽容器而非换行
• 元素继承了 white-space: nowrap（比如从按钮、导航项等组件传来）
• 用在 <pre> 上，默认 white-space: pre 会压制换行逻辑，需额外加 white-space: pre-wrap
• 表格单元格未设 table-layout: fixed + 明确 width，overflow-wrap 常被忽略

word-break: break-all 的适用边界

它确实能切开 user_id_123456789 这类串，但不是万能解药：

• 慎用于正文、标题、按钮文字——break-all 可能把 functionName 切成 func 和 tionName
• 必须配合 white-space: normal，否则若父级是 nowrap，它照样不生效
• 在 display: table-cell 中，Safari 表现不稳定；Firefox 则可能比 Chrome 更激进地断行
• 移动端 iOS Safari 对 break-all 在 Flex 子项中支持较差，建议加 -webkit-word-break: break-all

中英文混合时的典型组合

纯中文不会溢出，但混入英文后常出问题。推荐写法：

论文常用的tex格式转换为word格式，核心是能转换数学公式（非图片），表格，图表等等

将 LaTeX（.tex）学术论文转换为 Word（.docx），支持可编辑的 OMML 公式、原生 Word 表格、嵌入图形、IEEE 双栏排版及参考文献

下载

.mixed-text {
  overflow-wrap: break-word;
  word-break: keep-all;
  max-width: 100%;
}

• word-break: keep-all 阻止中文被意外劈开（如“测试test123”不会切成“测 试test123”）
• overflow-wrap: break-word 仍对英文部分生效，让 test123 在必要时整体换行
• max-width: 100% 是防 Flex/Grid 布局中子项锁死宽度的关键补丁
• 注意：iOS 12 以下需加 -webkit-word-break: keep-all 才能生效

pre 标签里长英文怎么换行

<pre> 默认禁用换行，直接加 overflow-wrap 无效。正确做法是：

立即学习“前端免费学习笔记（深入）”；

• 保留原始缩进和换行：用 white-space: pre-wrap
• 再叠加换行控制：overflow-wrap: break-word
• 如果内容是代码，建议额外加 font-family: monospace 和 line-height: 1.4 提升可读性
• 避免用 word-break: break-all —— 代码变量名被切开会严重干扰理解

实际项目中最容易被忽略的是布局上下文对换行属性的压制：Flex、Grid、table、pre、white-space 这几类容器会各自覆盖文本流行为，单靠一个 overflow-wrap 很难兜底。得先确认容器类型，再决定要不要松开 min-width、重置 white-space、或加前缀兼容。