最常见原因是<td>默认white-space: nowrap压制所有换行，必须显式设white-space: normal；还需配合width/max-width及table-layout: fixed，Flex/Grid中额外加min-width: 0。

为什么加了 word-break: break-all 还是不换行？

最常见原因是 <td> 默认有 white-space: nowrap，它直接压制所有换行行为。哪怕你写了 word-break: break-all，只要没显式覆盖 white-space，就等于没生效。

• 先检查 computed style：用开发者工具看 <td> 的 white-space 值是不是 nowrap
• 必须显式设 white-space: normal 或 pre-wrap（后者保留原始换行符）
• table-layout: fixed 下，若没给 <td> 设 width 或 max-width，浏览器根本不会触发换行计算
• Flex/Grid 容器里的 <td> 还要加 min-width: 0，否则默认的 min-width: auto 会阻止收缩

overflow-wrap: break-word 和 word-break 到底怎么配？

word-break: break-all 是“暴力断”，overflow-wrap: break-word 是“必要时才断”。现代中英文混排场景下，后者才是主力，前者只适合日志 ID、调试面板这类纯展示且可读性无要求的场合。

• 推荐组合：overflow-wrap: break-word + word-break: normal（不是 break-word，那个值已废弃）
• overflow-wrap: break-word 负责判断“要不要断”——只在整词放不下时才断，比如长 URL 会在 / 处自然折行
• word-break: normal 负责“在哪能断”——中文按字、英文按空格/连字符，互不干扰
• 别用 word-break: break-word：它不是标准值，Chrome 89+ 忽略，Safari 兼容差

表格里长 URL 或哈希值撑破列宽怎么办？

这不是换行问题，是宽度约束缺失。换行永远需要明确边界，没有 width 或 max-width，浏览器优先拉伸内容而不是折行。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 给 <td> 加 max-width: 200px（数值按实际列宽定）
• 父 <table> 建议加 table-layout: fixed，避免列宽被内容撑开
• 如果用了 table-layout: fixed，必须给对应 <col> 或第一行 <td> 设宽度，否则样式无效
• 长路径如 https://api.example.com/v1/users/abc123def456 会在 / 处断，而不是在 us 或 er 中间硬切

JavaScript 动态设置换行样式容易踩什么坑？

JS 设置 CSS 属性名是驼峰式，拼错就静默失败；更麻烦的是，某些框架或 DOM 状态会让样式计算延迟或跳过。

立即学习“前端免费学习笔记（深入）”；

• 正确写法：el.style.overflowWrap = 'break-word'，不是 overflow-wrap
• el.style.wordBreak = 'normal'，不是 word-break
• 别在 display: none 的元素上提前设换行样式——此时浏览器不计算布局，样式无效
• Vue/React 中首次渲染未生效？用 getComputedStyle(el).overflowWrap 检查是否真的应用成功
• 动态插入含换行需求的文本后，建议触发一次 el.offsetHeight 强制重排，确保样式即时生效

真正起作用的从来不是单个属性，而是 white-space、overflow-wrap、容器宽度三者共同构成的约束闭环。漏掉任意一环，换行就只是纸上谈兵。