优先用 overflow-wrap: break-word，再加 word-break: normal 和明确的 max-width；word-break: break-all 仅用于纯技术字段。
直接给结论：优先用 overflow-wrap: break-word，再加 word-break: normal 和明确的 max-width；word-break: break-all 只在纯技术字段（如 token、日志 ID）里用，别往正文里塞。
为什么 overflow-wrap: break-word 是首选
它只在整词放不下时才切开单词，比如把 https://example.com/verylongpath 折到下一行，而不是在 exa 和 mple 中间硬砍。语义保留得好，中英混排、带斜杠或点号的 URL 都能靠自然分隔符先换行，fallback 切词也克制。
-
overflow-wrap: anywhere更激进——只要放不下就立刻断，适合对可读性要求不高但必须不溢出的场景（如固定宽表格列） -
word-wrap是旧名，和overflow-wrap完全等效，但新项目建议写标准名 - 不写
word-break: normal也可能被继承值干扰，显式声明更稳 - 没有
max-width或width，这个属性根本不会触发——它需要一个“装不下”的参照
word-break: break-all 的适用边界与风险
它会在任意两个字符之间断，包括 J 和 a、1 和 2，对中文无效（汉字本来就能断），但对英文缩写、API 名、base64 片段杀伤力极强。
- 适合：
<td class="id-column">a1b2c3d4e5f6g7h8i9j0</td>这类固定列宽的技术字段 - 不适合：
<p>请调用我们的 UserAuthentication API 获取令牌</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8305" title="Douyin Keyword Collector"><img src="https://img.php.cn/upload/skill/000/000/081/179196489279321.jpg" alt="Douyin Keyword Collector" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8305" title="Douyin Keyword Collector">Douyin Keyword Collector</a> <p>通过浏览器自动化访问抖音首页，在搜索栏输入关键词并在自动化流程中收集相关关键词建议</p> </div> <a href="/xiazai/skill8305" title="Douyin Keyword Collector" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>—— 可能切成UserAuthen和tication - 别和
overflow: hidden搭配：后者会直接截掉末尾，不如让内容换行可见 - 和
hyphens: auto同时写会失效——break-all直接覆盖断字逻辑
为什么加了 overflow-wrap 还是溢出？三个最常漏的点
不是属性没用，是前提条件没凑齐。DevTools 里看 computed style，如果 overflow-wrap 显示为 normal，基本就是下面某条没满足。
- 父容器没设
width或max-width（比如 flex 项没设min-width: 0，表格没设table-layout: fixed） - 子元素写了
white-space: nowrap——它会锁死所有换行行为，包括overflow-wrap - 元素是
position: absolute且没限制left/right或width，脱离文档流后overflow-wrap失去作用对象
hyphens: auto 不生效？别怪 CSS，先查 lang 和内容类型
hyphens: auto 不是万能断行开关，它是印刷级连字符方案，依赖三重校验：语言标记正确、浏览器内置词典支持、内容本身是可断的英文单词。
- 必须写
<p lang="en">JavaScript</p>，光加 CSS 不管用；服务端渲染漏lang，前端补 CSS 白搭 - 对
verylongemail@example.com、MTIzNDU2Nzg5MA==、苹果手机全部静默——它们不被视为“可断单词” - Safari 12 以下、IE11 完全不支持；Chrome/Firefox 对
lang="en"支持较好，lang="zh"基本无视 - 真要用，得和
overflow-wrap: anywhere分层配合：前者保底线不断溢出，后者锦上添花加连字符
真正难的从来不是抄一行 CSS，而是确认容器宽度是否真的被约束住、lang 是否随内容动态输出、以及那段“长单词”到底是用户输入的 URL 还是需要阅读的英文术语——选错策略，轻则影响可读性，重则让移动端整个卡片布局崩溃。
