是富文本中最稳妥的分割线方式，但直接插入常因内联样式导致语义错位、高DPR发虚等问题；应统一替换为并用CSS精确控制，小程序需用setContents插入，文字分割线宜用flex三列结构实现。
<hr> 是富文本编辑器里最稳妥的分割线插入方式，但直接点工具栏图标插入的那条线，往往默认样式难看、语义错位、高 DPR 屏幕发虚——问题不在“能不能用”，而在“怎么用对”。
富文本编辑器里点出来的 <hr> 为什么总不对劲
多数富文本控件（如仪表板中的富文本组件、微信小程序 editor、或基于 contenteditable 的编辑器）点击“插入分割线”按钮后，底层生成的是 <hr>，但它常被套上无意义的内联样式，比如 style="width:100%;height:2px;border:none;background:#ccc;"。这类写法有三个隐患：
- 没重置默认
margin，导致上下撑开空白过大 - 用
background-color却没配height或清除border，在部分 WebView 中渲染失败 - 强行设
width: 100%在 flex 容器或响应式卡片里会溢出或截断
实操建议：导出 HTML 后手动清理，统一替换为 <hr class="rich-divider">，再用 CSS 精确控制。
微信小程序 editor 怎么插入可控的分割线
小程序原生 editor 组件不提供“插入 <hr>”的 API，也不能直接执行 insertText 插入 HTML 标签。必须靠 EditorContext.format 模拟，但该方法不支持插入块级元素。
立即学习“前端免费学习笔记（深入）”；
可行路径只有两条：
- 用
EditorContext.setContents（需基础库 2.27.0+）传入完整 HTML 字符串，其中包含<hr>—— 注意必须确保editor的show-img-toolbar和read-only状态兼容 - 退而求其次，在编辑器外加一个按钮，点击后调用
editor的getContents获取当前 HTML，拼接<hr class="weapp-hr">后再用setContents写回
关键限制：format('insertDivider', '') 这类伪指令不存在，别在文档里白找。
富文本中带文字的分割线怎么实现（如“或者”居中）
富文本编辑器几乎都不支持直接插入“文字打断的分割线”，<hr> 本身不能嵌套内容，alt 属性无效，伪元素在 contenteditable 区域不可靠。
真实可用方案是绕过编辑器限制，用结构换功能：
- 插入一个三列
div：左右两个div各设flex-grow: 1; border-top: 1px solid #e0e0e0;，中间span写文字并加margin: 0 8px; - 给这个容器加 class（如
class="text-divider"），并在富文本的全局 CSS 中定义样式，避免内联污染 - 若编辑器禁止插入
div，就改用table：单行三列表格，左右单元格设border-top，中间放文字 —— 兼容性反而更好
注意：不要试图用 <hr> + data-text + JS 注入文字，富文本导出时这类自定义属性大概率被过滤。
富文本导出后分割线在高分屏发虚怎么办
iPhone 或安卓高端机上，1px 的 border 或 <hr> 渲染为物理 0.5px，肉眼模糊甚至消失。这不是 bug，是设备像素比（DPR）的正常表现。
解决方案不是媒体查询写 border: 0.5px（不兼容），而是用缩放保精度：
- 对
<hr class="rich-divider">，CSS 写：height: 2px; background: #e0e0e0; transform: scaleY(0.5); - 对
div分割线，同样设height: 2px+transform: scaleY(0.5)，比border-top: 1px更稳 - 若要适配所有 DPR，可结合 JS 动态加 class：
document.documentElement.classList.add('dpr-2')，再用.dpr-2 .rich-divider { transform: scaleY(0.5); }
真正容易被忽略的是：富文本内容常以 iframe 或 shadow DOM 封装，transform 可能被隔离作用域截断，务必确认样式作用域覆盖到实际渲染节点。
