overflow-wrap: break-word 需配合 width/max-width、min-width: 0 等条件才生效，单独使用几乎无效；它仅在容器有明确宽度且单词溢出时触发断词，非万能换行开关。
overflow-wrap: break-word 能换行长单词，但**单独写这行 CSS 几乎一定失效**。它不是开关，而是“条件触发器”：只在容器宽度明确、且整词放不下时才断开。
为什么写了 overflow-wrap: break-word 还不换行
根本原因不是属性写错，而是浏览器没拿到“必须换行”的信号：
-
width或max-width缺失——容器没边界，浏览器认为“还能撑”，不触发断词 - 父级用了
display: flex，但子元素没设min-width: 0——flex item 默认min-width: auto，锁死宽度，overflow-wrap彻底被忽略 - 同时存在
white-space: nowrap——它优先级更高，直接禁用所有自动换行行为 - 元素是
inline或inline-block——该属性对非块级元素支持不稳定 - 用了
display: table-cell——表格单元格有特殊换行规则，overflow-wrap表现不可靠
真正起效的最小 CSS 组合
不要只写一行。以下四条配合使用，覆盖绝大多数场景：
div {
width: 100%;
max-width: 300px;
overflow-wrap: break-word;
min-width: 0; /* 关键！尤其在 flex / grid 容器中 */
}
说明：
-
width或max-width必须显式设置，哪怕只是width: 100%（前提是父容器有宽度） -
min-width: 0是 flex 场景下最常漏掉的一环；grid 子项同理 - 旧版 Safari（15.4 之前）需要
word-wrap: break-word兜底，可并行声明 - 避免混用
word-break: keep-all，它会压制overflow-wrap的行为
overflow-wrap: break-word 和 word-break: break-all 别混用
两者策略完全不同，混用反而引发兼容性问题：
-
overflow-wrap: break-word：只在“整词塞不进当前行”时才断，比如supercalifragilisticexpialidocious放不进 200px 才切 -
word-break: break-all：无差别切，hello可能被切成hel+lo，中文也会逐字断 - Chrome 按
word-break执行，Firefox 可能按overflow-wrap执行，结果不一致 - 纯哈希、base64 等标识符可用
break-all；正文、用户输入内容请坚持break-word
最容易被忽略的点是：它不解决“容器本身没宽度”的问题。哪怕你把所有文本样式都写对了，父容器是 position: absolute 且没设 width，或者嵌套在未约束的 flex 里，overflow-wrap 就只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
