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 class="brush:php;toolbar:false;"></pre>上，默认white-space: pre会压制换行逻辑，需额外加white-space: pre-wrap - 表格单元格未设
table-layout: fixed+ 明确width，overflow-wrap常被忽略
word-break: break-all 的适用边界
它确实能切开 user_id_123456789 这类串，但不是万能解药：
Teleport tsh SSH (Identity-First SSH Access, no passwords/static keys)
下载
使用tbot机器ID身份文件配合tsh CLI，通过Teleport访问控制SSH登录托管主机或执行远程命令。
- 慎用于正文、标题、按钮文字——
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
中英文混合时的典型组合
纯中文不会溢出，但混入英文后常出问题。推荐写法：
.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 class="brush:php;toolbar:false;"></pre> 默认禁用换行，直接加 overflow-wrap 无效。正确做法是：
- 保留原始缩进和换行：用
white-space: pre-wrap - 再叠加换行控制：
overflow-wrap: break-word - 如果内容是代码，建议额外加
font-family: monospace和line-height: 1.4提升可读性 - 避免用
word-break: break-all—— 代码变量名被切开会严重干扰理解
overflow-wrap 很难兜底。得先确认容器类型，再决定要不要松开 min-width、重置 white-space、或加前缀兼容。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
