按 enter 默认插入 创建新段落，shift+enter 插入 仅换行；后端或 markdown 中的 \n 需转为 或用 white-space: pre-line 渲染。
富文本编辑器里按 Enter 是
还是
？
默认行为取决于编辑器实现，但主流编辑器（如 TinyMCE、CKEditor、Quill、ProseMirror）在可编辑区域（contenteditable）中：
• 按 Enter 插入 <p></p>，创建新段落
• 按 Shift+Enter 插入 <br>，仅换行不新建段落
• 这不是 HTML 标准规定，而是编辑器主动拦截并注入对应标签
如果你发现按 Enter 后行间距过大，大概率是编辑器生成了带默认 margin 的 <p></p>，而不是你想要的紧凑换行。此时别硬删 <p></p> 标签——直接改用 Shift+Enter 更快。
从后端或 Markdown 渲染进来的文本换行失效？
常见现象：数据库字段存的是带 \n 的字符串（如地址「北京市朝阳区\n建国路8号」），前端直接 innerHTML = text，结果所有换行全没了。
原因：HTML 解析器忽略纯文本中的 \n，它只认 <br> 或 CSS 控制的换行逻辑。解决方式分两类：
• 服务端渲染时，把 \n 替换成 <br>（注意 XSS 过滤）
• 前端渲染时，用 white-space: pre-line 或 white-space: pre-wrap 包裹容器
• 别用 white-space: pre，它会保留所有空格缩进，破坏排版
推荐方案：<div class="text-content" style="white-space: pre-line;">${text}</div> —— 它合并多余空格、保留换行符、允许自动折行，适配移动端。
<br> 能不能用 CSS 隐藏或响应式控制？
不能。这是最容易踩的坑：<br> 是 DOM 节点，不是样式，CSS 无法通过 display: none 或媒体查询动态开关它的换行效果。
比如你想在手机上让地址「省
市
区」变成一行显示，用 <br> 就得 JS 删除节点或服务端输出两套 HTML；而用 white-space: pre-line + @media (max-width: 480px) 改成 white-space: normal，一行 CSS 就搞定。
真正需要响应式换行控制时，优先放弃 <br>，改用：
• white-space + overflow-wrap 处理长单词
• display: flex + flex-wrap 控制多行布局
• <p></p> 配合 margin 调整段间距，语义清晰且可控
为什么有时候 <br> 看起来没生效？
不是标签坏了，通常是以下三种情况之一：
• 父容器设了 white-space: nowrap，强制禁用所有换行，包括 <br>
• <br> 被写在 <pre class="brush:php;toolbar:false;"></pre> 或 white-space: pre 元素里，此时它被忽略（<pre class="brush:php;toolbar:false;"></pre> 只认原始 \n）
• 编辑器或 CMS 自动过滤了 <br>，尤其在用户提交内容时，后台安全策略可能移除“危险”标签
调试建议：打开浏览器开发者工具，检查元素是否真实存在 <br> 节点；再看 computed 样式里 white-space 值是不是 nowrap；最后确认父级有没有 <pre class="brush:php;toolbar:false;"></pre>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
