答案：<br>在<td>中失效是因为它仅实现手动换行，而自动换行需依赖宽度约束（如max-width+table-layout:fixed）和空白处理规则（如white-space:normal、overflow-wrap:break-word、word-break:break-word）。
为什么直接写 <br> 在 <td> 里经常失效
不是标签没用，而是它只解决“单点换行”，不解决“容器内自动折行”。<td> 默认是块级容器，但它的换行逻辑依赖于宽度约束和空白处理规则。如果没设宽、没配 white-space、也没关掉默认的弹性列宽，<br> 就像扔进海里的石头——看着进了水，其实没起作用。
常见错误现象：<td>第一行<br>第二行</td> 在窄屏下仍挤成一行；或后端返回含 \n 的字符串，前端直接插进去却完全不换行。
- 后端传来的
\n必须配合white-space: pre-line或pre-wrap才能还原，否则被浏览器当空格吞掉 -
<td>没设max-width或没开table-layout: fixed，表格会优先撑开列宽，根本没机会触发折行 - 用了
<br>却又加了white-space: nowrap，等于一边喊换行一边锁死换行
word-break 和 overflow-wrap 到底该选哪个
这两个属性职责不同，混用才稳。单独设一个，大概率翻车。
word-break 控制“能不能在词中间断”，overflow-wrap（旧名 word-wrap）控制“要不要为放不下而断”。中文为主时，word-break: keep-all 是底线——它只在标点、空格处断，不拆词；中英文混排且含长 URL 时，叠加 overflow-wrap: break-word，让英文部分断、中文部分不断。
立即学习“前端免费学习笔记（深入）”；
- 别用
word-break: break-all处理纯中文，它会在任意汉字间硬切，阅读体验极差 -
overflow-wrap: break-word是标准属性，word-break: break-word是非标但兼容广的写法，建议一起写 - 如果内容含 Base64、长哈希值等无分隔符字符串，
break-all可作为兜底，但要加font-family: monospace提升可读性
<td> 换行必须做的两件事
缺一不可：一是给容器“划边界”，二是告诉浏览器“可以折”。
第一件事：给 <td> 设 max-width（比如 max-width: 200px），比 width 更灵活；同时给 <table> 加 table-layout: fixed，否则列宽由内容撑开，CSS 宽度限制形同虚设。
第二件事：配齐三件套：white-space: normal（让空格和换行符按常规解析）、overflow-wrap: break-word（处理超长不可分内容）、word-break: break-word（增强兼容性）。
- 只写
td { overflow-wrap: break-word; }？没宽度、没fixed布局，等于白写 - 写了
table-layout: fixed却没给<col>或<th>设宽，列宽会塌缩到最小，内容反而被压缩变形 - 移动端要注意：iOS Safari 对
table-layout: fixed的支持较弱，必要时加min-width: 0防止列宽计算异常
移动端表格文字不换行的隐藏原因
即使样式全对，在 iOS Safari 或某些 Android 浏览器里，表格文字仍可能不换行。这不是 bug，是渲染链路里的几个隐性开关没拧开。
关键检查点：<meta name="viewport"> 是否漏了 width=device-width；用户是否开启了系统级字体缩放；<table> 是否被父容器（比如 flex 或 grid）限制了可用宽度。
- 安卓 WebView 有时会忽略
max-width，改用width: calc(100vw - 40px)这类明确计算值更可靠 - iOS Safari 对
word-break: keep-all的实现有延迟，建议加font-size: 16px避免小字号下换行策略降级 - 如果表格嵌在
overflow-x: auto的容器里，记得给<td>加min-width: 0，否则它会拒绝收缩
