overflow-wrap: break-word是当前唯一可靠选择，仅在整词超出容器时断行保可读性；需配合显式宽度、display:block/inline-block及min-width:0（flex/grid中）才生效。
overflow-wrap: break-word 是当前唯一可靠的选择
别写 word-break: break-word，它早在 Chrome 早期就被移除，现在所有主流浏览器都无视它——写了等于没写，开发者工具里根本看不到 computed 值。真正起效的是 overflow-wrap: break-word（旧名 word-wrap: break-word，兼容性略好但语义模糊）。这个属性只在整词超出容器时才触发内部断行，既防溢出又保可读性。
常见错误：把 overflow-wrap: break-word 单独加在 span 上却没生效——因为 span 默认是 inline 元素，必须显式设为 display: block 或 inline-block 才能响应宽度约束。
flex/grid 容器里 word-break: break-all 不生效？先查 min-width
给子元素写了 word-break: break-all，父容器也设了 max-width: 200px，但 URL 还是撑破布局。大概率是父容器用了 display: flex 或 grid，而子项默认带 min-width: auto，锁死了压缩能力。
- 修复方法：给子元素加
min-width: 0或overflow: hidden - 别同时设
white-space: nowrap，它会直接覆盖换行行为 - 中英混排场景下，
word-break: keep-all必须配合overflow-wrap: break-word使用，否则中文夹英文长串（如“测试test123456789”）的英文部分仍会整段溢出
wbr 标签不是万能胶，它只在三重条件满足时才起效
wbr 是语义断点，不是强制换行符——它只在容器宽度不足、CSS 允许折行、且插入位置合理时才被浏览器采纳。加了没反应？90% 是以下原因：
- 容器没设
width或max-width，浏览器永远觉得“还能塞下” - 没配
overflow-wrap: break-word（或word-wrap: break-word），wbr 的建议直接被忽略 - 父元素有
white-space: nowrap（比如默认的code标签），必须显式覆盖为white-space: normal - 插错位置：URL 应插在
/后、.后、@前后；驼峰命名插在大写字母前（如fetch<wbr>Data</wbr>），而不是单词中间（hel<wbr>lo</wbr>）
overflow-wrap: anywhere 和 break-word 在弹性布局里表现不同
两者在常规块级容器里效果几乎一致，但在 flex 子项、min-content 宽度等弹性场景下差异明显：
-
overflow-wrap: anywhere会让最小内容宽度缩到单个字符宽，适合极窄空间兜底 -
overflow-wrap: break-word仍按最长单词算最小宽度，更保守 - 真正容易被忽略的是：所有换行控制都依赖明确的宽度限制——没
width、max-width或弹性约束，浏览器根本没换行动机
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
