表格单元格不换行的根本原因是默认 white-space: nowrap 优先级高于断行属性，必须显式设 white-space: normal 才能触发 word-break 或 overflow-wrap；还需配合 width/max-width、min-width: 0 等约束条件，并注意中英文混排时 overflow-wrap: break-word + word-break: keep-all 的组合更安全。

表格单元格里加了 word-break: break-all 还是不换行？

不是属性写错了，是它根本没触发机会。<td> 默认有 <code>white-space: nowrap，这个样式优先级高于所有断行控制，直接禁用换行逻辑。哪怕你写了 word-break: break-all 或 overflow-wrap: break-word，浏览器也当没看见。

必须显式覆盖：white-space: normal 是第一步，否则后面全白搭。

• 检查 computed styles，确认 white-space 确实是 normal，而不是被父级或全局样式覆盖回 nowrap
• 如果用了 table-layout: fixed，<td> 还得配 <code>width 或 max-width，否则宽度约束失效，断行无从谈起
• 别只靠 word-break: break-all —— 它在表格里容易切乱英文 URL（比如 https:// 变成 https:/+），可读性崩坏

中英文混排的表格列该用 overflow-wrap: break-word 还是 word-break: break-all？

用 overflow-wrap: break-word，并配 word-break: keep-all。

word-break: keep-all 的真实作用是：中文禁止字间断（其实中文本来也不需要空格就能断），英文退回到 normal 规则——即只在空格、/、.、- 处断；而 overflow-wrap: break-word 负责兜底：当整个英文单词（如 APIKey1234567890）放不下时，才在词内切开。


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
• 长 URL 会优先在 / 处换行，而不是在 ex 中间硬切
• 中文段落自动按字断，不会溢出，也不会被误切成“你好世 界”
• 必须同时设 max-width（比如 max-width: 200px），否则 overflow-wrap 找不到“边界”，压根不启动

Flex 布局嵌套表格时，<td> 死活不换行？ <p>这是双重锁定：表格单元格本身有默认行为，再叠一层 Flex 后，子项又带 <code>min-width: auto，直接锁死收缩能力。

光加 overflow-wrap 没用，必须解两道锁：

• 给 <td> 加 <code>min-width: 0（推荐，语义清晰）或 overflow: hidden（副作用是隐藏滚动条）
• 确保父 <tr> 或外层 Flex 容器有明确宽度约束（<code>width、max-width 或 flex-basis）
• 别信 white-space: pre-wrap 能救场——它保留原始换行符，但对无空格长串（如 Base64）完全无效

移动端表格里长文本突然不换行？

iOS 12 以下 WebView 对 word-break 在 <td> 中的支持不稳定，Safari 15.4 之前在某些 contenteditable 场景也会失效。这不是你代码的问题，是渲染引擎的兼容断层。 <p>稳妥做法是降级兜底：</p> <ul> <li>加 <code>word-wrap: break-word（overflow-wrap 的旧别名），和 overflow-wrap: break-word 一起写，覆盖老浏览器

• 对极端窄列（比如手机端 ID 列），单独用 word-break: break-all，但仅限该列，避免污染其他内容
• 真正在意可读性的地方（如用户可见的 API 路径），宁可截断加 text-overflow: ellipsis，也别让 break-all 随意切开协议头

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！