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

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

为什么 <br> 加了没反应？

常见现象：在 <div> 或 <code><span></span> 里插入 <br>，但文本仍挤在一行，甚至完全不换行。

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

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

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

• text-align: center 让 <span></span> 或文字居中，但对 <div> 子元素无效（除非子元素是 inline 级） <li> <code>vertical-align: middle 在 <img alt="HTML元素对齐与换行的处理技巧" > 后面放文字时有用，但在两个并排 <div> 上设置毫无效果 <li>想让两个块级元素垂直居中对齐？得用 <code>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）
• 若最后一个子节点不是文本节点（比如以 <ul></ul> 结尾），需新建 document.createTextNode('\n') 并 appendChild 到末尾
• 避免在 contenteditable 区域或富文本编辑器里硬塞 \n，它们通常依赖 <div> 或 <code><p></p> 换行语义

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