HTML换行与对齐由display模式、white-space行为、vertical-align作用域共同决定；br仅在文本流中生效，遇flex/grid/nowrap等上下文即失效，text-align和vertical-align各有明确作用范围。

HTML 元素对齐和换行不是靠猜或试出来的，而是由 display 模式、white-space 行为、vertical-align 作用域三者共同决定的；盲目用
或 align 属性往往掩盖了真实布局问题。

为什么
加了没反应？

常见现象：在

或 里插入
，但文本仍挤在一行，甚至完全不换行。

• 
只在「文本流中」生效——它必须出现在可包含文本的元素内部（如
  、），且该元素不能是 display: flex / grid / table-cell 等破坏文本流的上下文
• 如果父容器设了 white-space: nowrap，
会被忽略（浏览器直接当普通空格处理）
• 在 display: inline-block 的元素里加
，只影响其内部文本，不影响它与其他 inline 元素的水平排列

text-align 和 vertical-align 到底管谁？

text-align 控制的是「块级容器内行框（line box）的水平对齐」，而 vertical-align 只对「行内级元素（inline/inline-block/table-cell）及其子元素」起作用——它不控制块级元素之间的上下对齐。

• text-align: center 让 或文字居中，但对
  子元素无效（除非子元素是 inline 级）
• vertical-align: middle 在 后面放文字时有用，但在两个并排
  上设置毫无效果
• 想让两个块级元素垂直居中对齐？得用 display: flex + align-items，或 display: grid，而不是瞎调 vertical-align

混合内容（文本+子元素）末尾加换行怎么写才安全？

直接改 innerHTML 或 textContent 容易删掉子节点或引入 XSS 风险；DOM 操作必须精准定位到目标 Text 节点。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 先遍历父元素的 childNodes，过滤出最后一个 Node.TEXT_NODE
• 用 node.nodeValue += '\n' 追加换行符（注意：不是 \r\n，浏览器只认 \n）
• 若最后一个子节点不是文本节点（比如以
  结尾），需新建 document.createTextNode('\n') 并 appendChild 到末尾
• 避免在 contenteditable 区域或富文本编辑器里硬塞 \n，它们通常依赖
  或

  换行语义

  最常被忽略的一点：换行和对齐的「作用域」不是全局的，它严格受限于当前元素的 display 值和父容器的格式化上下文。不看 computed style 就调样式，等于在黑暗里拧螺丝。