在表格单元格中可能失效，主因是css的white-space、display:flex或text-overflow干预；正确用法是置于内文本中，不可包裹内容；推荐用white-space:pre-line或div替代以提升可控性。

为什么 <br> 在表格单元格里有时不生效

直接在 <td> 或 <code><th> 里写 <code><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> 内部文本中，不能包裹文字（<code><br>内容 是错的）
• 连续多个 <br> 会生成多行空白，但浏览器可能合并相邻空白（尤其在 white-space: normal 下）
• 如果单元格含 inline 元素（如 <span></span>），<br> 只对它前面的文本生效，不影响后续元素布局

示例：

<td>第一行<br>第二行<br><br>空一行后第三行</td>

比 <br> 更可控的替代方案

当需要稳定控制换行、对齐或响应式表现时，<br> 很容易失控。更推荐用 CSS 控制：


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 用 white-space: pre-line：保留换行符（\n），自动折叠多余空白，适合从后端注入带 \n 的文本
• 用 display: block + 多个 <div>：语义清晰，可单独设样式，比如 <pre class="brush:php;toolbar:false;">&lt;td&gt; &lt;div&gt;上行&lt;/div&gt; &lt;div&gt;下行&lt;/div&gt; &lt;/td&gt; </pre> <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 和内容结构。