<br>在表格单元格中可能失效，主因是CSS的white-space、display:flex或text-overflow干预；正确用法是置于<td>内文本中，不可包裹内容；推荐用white-space:pre-line或div替代以提升可控性。
为什么 <br> 在表格单元格里有时不生效
直接在 <td> 或 <th> 里写 <br> 确实能换行，但前提是单元格没被 CSS 的 white-space 或 overflow 干预。常见失效场景是：用了 white-space: nowrap（比如某些 UI 框架默认设置），或父级设置了 display: flex，又或者单元格内容被 text-overflow: ellipsis 截断了。
验证是否生效最简单的方法：临时加一行内联样式 style="white-space: normal;"，再试 <br>。
正确使用 <br> 的写法和限制
<br> 是空元素，只起换行作用，不产生额外空白或缩进。它不关心语义，也不受 line-height 直接控制——实际行高由所在行的 line-height 和字体大小共同决定。
- 必须写在
<td>内部文本中，不能包裹文字（<br>内容</br>是错的） - 连续多个
<br>会生成多行空白，但浏览器可能合并相邻空白（尤其在white-space: normal下） - 如果单元格含 inline 元素（如
<span>），<br>只对它前面的文本生效，不影响后续元素布局
示例：
立即学习“前端免费学习笔记（深入）”；
<td>第一行<br>第二行<br><br>空一行后第三行</td>
比 <br> 更可控的替代方案
当需要稳定控制换行、对齐或响应式表现时，<br> 很容易失控。更推荐用 CSS 控制：
- 用
white-space: pre-line：保留换行符（\n），自动折叠多余空白，适合从后端注入带 \n 的文本 - 用
display: block+ 多个<div>：语义清晰，可单独设样式，比如<td><div>上行</div><div>下行</div></td></li> <li>避免用 <code>white-space: pre
：会保留所有空格和缩进，容易破坏排版
注意：若表格列宽固定且内容超长，<br> 不会触发自动折行，此时得靠 word-break: break-word 或 overflow-wrap: break-word 配合。
移动端和屏幕阅读器下的注意事项
<br> 在屏幕阅读器中通常会被读作“换行”，可能干扰信息流；在小屏设备上，若单元格高度被 CSS 强制限制（如 max-height: 2em），<br> 产生的行可能被截断或溢出不可见。
- 不要依赖
<br>实现“视觉分隔”——那该用<hr>或 border - 若内容来自用户输入，优先服务端转义 \n 为
<br>，而非前端 JS 插入，避免 XSS 风险 - 测试时务必在真机 Safari 和 Android Chrome 上检查，有些 WebView 对
white-space解析有差异
真正麻烦的不是加不加 <br>，而是加完之后那一行到底占多少高度、会不会被裁、读屏时怎么念——这些都得看上下文 CSS 和内容结构。
