加了word-break: break-all仍不换行，最常见原因是<td>默认white-space: nowrap压制换行，必须显式设white-space: normal或pre-wrap，并配合table-layout: fixed及td的width/max-width才能生效。

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

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

• 先用开发者工具检查 <td> 的 computed white-space 值是不是 nowrap
• 必须显式设为 white-space: normal（空格/换行符按常规解析）或 pre-wrap（保留原始换行符且允许折行）
• table-layout: fixed 下，若没给 <td> 设 width 或 max-width，浏览器根本不会触发换行计算

overflow-wrap: break-word 和 word-break 怎么配才靠谱？

overflow-wrap: break-word 负责判断“要不要断”——只在整词放不下时才断，比如长 URL 会在 / 处自然折行；word-break: normal 负责“在哪能断”——中文按字、英文按空格/连字符，互不干扰。

• 推荐组合：overflow-wrap: break-word + word-break: normal
• 别用 word-break: break-word：它不是标准值，Chrome 89+ 忽略，Safari 兼容差
• word-break: break-all 是“暴力断”，适合日志 ID、调试面板这类纯展示场景，中文阅读体验差

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

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 给 <td> 加 max-width: 200px（数值按实际列宽定）
• 父 <table> 建议加 table-layout: fixed，避免列宽被内容撑开
• 如果用了 table-layout: fixed，必须给对应 <col> 或第一行 <td> 设宽度，否则样式无效

后端返回含 \n 的文本，前端怎么还原换行？

<td> 默认不认换行符，white-space: normal 下 \n 会被当普通空格处理。这不是 bug，是 HTML 渲染规则。

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

• 如果后端返回的文本含原始 \n（比如用户评论），前端必须配合 white-space: pre-line 或 pre-wrap 才能还原换行
• 想手动插入换行点又不想破坏语义？用 <wbr>，它是“可断点”，由浏览器决定是否真断，比硬塞 <br> 更自然
• 别在 display: none 的元素上提前设样式——JS 动态设置时，el.style.overflowWrap = 'break-word' 才对，不是 overflow-wrap；拼错就静默失败

换行真正生效的关键不在属性堆砌，而在三件事同时到位：显式控制空白符行为、明确容器宽度边界、选对断词策略。漏掉任意一个，都可能看到中文正常、英文 URL 撑破表格、或整段文字挤成一行。