应优先使用overflow-wrap: break-word，它仅在长单词或url撑爆容器时才内部断行，先尝试按/、.等自然断点换行，兼顾语义与布局稳定；word-break: break-all会无差别切分字符，仅适用于哈希、uuid等纯机器字符串。
长单词或长 URL 溢出遮挡，本质不是“内容太长”，而是浏览器默认不打断连续字符流，导致块级容器无法按预期收缩或换行。直接加 overflow: hidden 往往无效，因为溢出源不在你写的那个元素上。
word-break 和 overflow-wrap 的选择逻辑
这两个属性解决的是不同层级的问题：word-break 控制断词时机，overflow-wrap 控制是否允许“不得已时”断词。
-
word-break: break-all：强制在任意位置断开，适合纯 ID、哈希值、base64 字符串等无语义场景；但会把 “internationalization” 拆成 “inter-nation-aliza-tion”，阅读体验差 -
word-wrap: break-word（等价于overflow-wrap: break-word）：先尝试整词换行，实在放不下才断词；适合英文段落、URL、邮箱地址 - 不要同时设两者——
word-break: break-all会覆盖overflow-wrap的行为，且在 Firefox 中可能触发意外渲染 - 现代写法推荐用
overflow-wrap: break-word，因word-wrap是旧别名，已不被 CSS 规范鼓励
为什么 overflow: hidden 加了还是溢出
常见失效原因是：溢出发生在内联元素（如裸文本、<span></span>）、<pre class="brush:php;toolbar:false;"></pre> 或未重置 white-space 的子节点里，而你只给父容器加了 overflow: hidden。
-
<pre class="brush:php;toolbar:false;"></pre>和<code>默认white-space: pre，无视父级overflow，必须单独加white-space: pre-wrap或overflow-x: auto - Flex 项目中，
flex: 1的项若没设min-width: 0，文本会优先撑开容器，overflow完全不生效 - 表格单元格（
<td>）需配合 <code>table-layout: fixed才能真正约束宽度；只加word-break会被默认的auto布局忽略 -
text-overflow: ellipsis必须作用于有明确宽度限制的块级元素，且其 display 不能是inline - 更稳妥的做法是包裹一层
<span></span>并设overflow-wrap: break-word，同时对 URL 内部添加零宽空格（）或软连字符（），例如：https://example.com/verylongpath - 服务端渲染时可预处理，在
/、?、&后插入，前端无需 JS 即可响应式折行 - 避免用
word-break: break-all处理 URL，它可能把https://拆成https:/ /，造成语义断裂 - 移动端 Safari 对
overflow-wrap支持稳定，但 iOS 15 以下对渲染有轻微间距问题，建议搭配font-size: 0.98em微调
长 URL 的特殊处理路径
URL 不仅长，还常含 /、.、- 等非空格分隔符，overflow-wrap: break-word 对斜杠后断点支持弱，容易在域名中间硬切。
最易被忽略的一点：所有这些样式都必须落在**直接包裹文本的元素上**，而不是靠外层容器“一劳永逸”。浏览器渲染时不会向上继承溢出控制逻辑，也不会向下穿透内联格式化上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
