应使用在长单词、URL等需精准控制断点处，它仅在必要时软换行；而word-break和overflow-wrap是全局css策略，缺乏精确性。
什么时候该用 word-break 或 overflow-wrap
https://api.example.com/v2/users/abc1234567890 这类无法自然分词的字符串。而 word-break: break-all 会无差别切开任意字符（包括中文、英文单词中间），overflow-wrap: break-word 只在整词超宽时才折行——这两者都是 CSS 层面的全局策略，缺乏精确控制点。
它必须放在**允许断开的位置**，比如连字符后、斜杠后、下划线后、点号后，或大小写切换处（如 PascalCase）。错误做法是插在单词中间（如 exa），这既无效也不符合可读性；更糟的是把它当空格或换行符滥用（比如连续放多个
- ✅ 推荐：
MyLongClassName、WithSuffix /api/v3/users/123456789012345 - ❌ 错误：
Hel（无意义）、lo test（冗余） - ⚠️ 注意：html 解析器会忽略
或里再依赖默认样式——某些字体或编辑器可能隐藏其效果
与 hyphens 和 text-align: justify 的兼容性问题
hyphens 属性互不干扰，但存在优先级关系：如果 hyphens: auto 已经在某处触发了连字符断行，text-align: justify）场景下，
ThisIsAVeryLongIdentifierThatMightBreakAtWBR
ButAlsoAtHyphen
实际项目中怎么批量加
手动往每个长字符串里插 /([/._#?&=])(?=w)/g 后加 textContent 渲染后再遍历文本节点做替换（注意避开 、 等特殊节点）。vue/react 中可用自定义指令或组件封装，例如 React 的
立即学习“前端免费学习笔记（深入）”；
- 正则示例（js）：
str.replace(/([/._#?&=])/g, '$1') - 避免过度：URL 中问号后参数值若含 Base64，慎插在等号后，否则可能把
data=abc...断成无效参数def - 服务端渲染时注意：确保输出为未转义的 HTML，否则
浏览器支持已覆盖所有现代环境（chrome 30+、firefox 21+、safari 8+、edge 12+），但 IE 完全不支持——如果还需兼容 IE，得降级用 （软连字符）或 JS 检测后动态插入。真正容易被忽略的是：它只对**内联元素中的文本流生效**，块级容器设了 white-space: nowrap 就直接废了。