在中常失效因父容器禁用文本流，需配合white-space: pre-line等css及明确宽度约束才能生效。

为什么 <br> 在 <td> 里经常没用 <p>因为浏览器默认把 <code><td> 当作块级容器，但它的换行逻辑不认原始换行符——<code><br> 虽然能生效，但前提是父容器没禁用文本流。常见干扰包括：white-space: nowrap、display: flex 外层包裹、或 table-layout: auto 下列宽被内容撑开导致无折行空间。

实操建议：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• <br> 只适合静态写死的文本（如地址、签名），且必须写成自闭合形式：<td>北京市<br>朝阳区</td>
• 别把它塞进动态渲染的单元格里：后端返回含 \n 的字符串时，<br> 根本不会出现，得靠 CSS 处理
• 连续多个 <br> 是坏习惯，它不语义、不可控、响应式下极易错位

white-space: pre-line 怎么配合后端 \n 字符生效

当 JavaScript 插入后端返回的带换行符字符串（比如 "第一行\n第二行"）时，\n 默认被忽略，必须显式告诉浏览器“这个回车要当换行处理”。

实操建议：

• 给 <td> 加 <code>white-space: pre-line：保留 \n，合并多余空格，比 pre 更实用
• 必须用 innerHTML 赋值，不能用 innerText，否则 \n 会变成字面量显示
• 如果 CMS 存的是 HTML 字符串（如 "line1<br>line2"），得先用 .replace(/<br>/gi, '\n') 转成真实换行符，再配 pre-line

overflow-wrap: break-word 不生效？先查 table-layout: fixed

90% 的“长 URL / Base64 撑破表格”问题，根源不在 td 上漏写属性，而在 <table> 没设 <code>table-layout: fixed。默认 auto 布局下，浏览器优先按内容算列宽，overflow-wrap 形同虚设。

实操建议：

• 给 <table> 加 <code>table-layout: fixed 和明确宽度（如 width: 100% 或 max-width: 600px）
• 给目标 <td> 同时设：<code>white-space: normal（别依赖默认）、overflow-wrap: break-word、word-break: break-word
• 如果表格嵌在 display: flex 容器里，还得给 <table> 加 <code>min-width: 0，否则 flex 的 min-width: auto 会锁死换行

  只想让某几列换行，其他列保持紧凑怎么办

  用全局 white-space: normal 会破坏表头或 ID 列的紧凑性。正确做法是分离控制：让表格宽度由内容驱动，再逐列设置行为。

  实操建议：

  • 用 width: max-content + max-width: 800px 控制 或外层容器，避免表格被强制拉伸
  • 对特定列用伪类精准控制：td:nth-child(2) { white-space: normal; overflow-wrap: break-word; }
  • 对不许换行的列（如序号、状态图标）加：white-space: nowrap，并配合适当 padding 防止挤在一起
  • 不设 table-layout: fixed，否则列宽会被第一行绑定，后续内容变化时无法弹性适应

  最易被忽略的一点：所有换行 CSS 都需要容器有明确宽度约束。没设 max-width、没配 table-layout: fixed、或被 flex 父容器锁住 min-width，都会让换行策略彻底失效——不是代码写错了，是布局条件没满足。

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