overflow-wrap: break-word没效果的根本原因是被其他样式或布局机制压制：white-space: nowrap会直接禁用换行；flex子项未设min-width: 0导致无法收缩；容器缺少width/max-width使浏览器无断行依据；table-cell或inline-block等特殊显示模式也限制其生效。
overflow-wrap: break-word 为什么没效果
加了 overflow-wrap: break-word 却还是溢出，大概率不是写错了属性，而是被其他样式或布局机制“压住”了：
-
white-space: nowrap存在时，它会直接禁用所有自动换行，overflow-wrap彻底失效 - 父容器是
display: flex，但子元素没设min-width: 0—— flex item 默认min-width: auto，会阻止收缩，导致断词逻辑不触发 - 容器本身没设
width或max-width，浏览器没“参照边界”，overflow-wrap不知道该在哪停 - 用了
display: table-cell或inline-block，这两者对换行控制有特殊规则，overflow-wrap表现不可靠
word-break: break-all 和 overflow-wrap: break-word 的关键区别
别再混用这两个属性来“保险”，它们行为完全不同，且容易破坏可读性：
-
word-break: break-all：在任意字符间断，哪怕hello也会切成hel+lo，对英文语义伤害大，仅适合纯数字 ID、哈希串等无意义长串 -
overflow-wrap: break-word：只在整词放不下时才断，优先保全单词完整；比如supercalifragilisticexpialidocious在 200px 容器里撑不开，才会内部折行 - 常见误配：
word-break: break-all; overflow-wrap: break-word;—— 前者已激进断开，后者完全没机会生效
wbr 标签该插在哪儿、不该插在哪儿
<wbr></wbr> 是 HTML 层面的断点提示，不是换行符，也不是空格。它的有效性高度依赖插入位置：
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
- ✅ 推荐位置：斜杠后（
/api/v2/users/<wbr>1234567890</wbr>）、下划线后（user_name<wbr>suffix</wbr>）、大小写切换处（MyLongClassName<wbr>WithSuffix</wbr>）、连字符后（high-priority<wbr>task</wbr>） - ❌ 错误位置：单词中间硬切（
exa<wbr>mple</wbr>），既无效也不利于屏幕阅读器识别 - ⚠️ 注意：
<wbr></wbr>在<pre class="brush:php;toolbar:false;"></pre>或<code>里可能被字体或编辑器样式掩盖，不要默认它一定可见
响应式场景下怎么选策略
固定宽度容器和流式容器处理超长英文单词的方式要分开看：
立即学习“前端免费学习笔记（深入）”；
- 固定宽（如
width: 300px）：直接上overflow-wrap: break-word，配合word-break: normal防误切 - 流式宽（如
max-width: 80%或 flex item）：必须确保子元素可收缩，加min-width: 0，否则overflow-wrap不触发 - 含用户输入的富文本区域：建议组合
white-space: pre-wrap+overflow-wrap: break-word，既保留原始换行，又防长串溢出
最易被忽略的是：<wbr></wbr> 不是“补救措施”，它是内容作者在构建阶段就该嵌入的语义标记；而 overflow-wrap 是渲染层兜底策略——两者定位不同，不能互相替代。
