<hr />标签本身不支持插入文字，必须用容器包裹<hr />和文字元素，再通过CSS定位（如relative+absolute或flex）实现文字覆盖居中，同时需注意语义正确性、可访问性对比度及响应式适配。
hr 标签本身不支持直接插入文字，必须配合其他元素实现
<hr> 是语义化分隔线标签，浏览器默认渲染为一条水平线，它没有子内容能力 —— 试图在 <hr> 内写文字（比如 <hr>or</hr>）会被忽略或导致验证错误。真正可行的做法是用容器包裹 <hr> 和文字，再通过定位“把文字叠上去”。
用 relative + absolute 实现文字居中覆盖
最常用且兼容性好的方式：外层设 position: relative，内部 <hr> 和文字都设为绝对定位，控制 z-index 和 top/left 值让文字压在中间。
示例结构：
<div style="position: relative; margin: 2rem 0;"> <hr style="margin: 0; border: none; border-top: 1px solid #ccc;"> <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 0 0.5rem; color: #666; font-size: 0.875rem;">or</span> </div>
-
top: 50%+left: 50%把文字左上角移到容器中心 -
transform: translate(-50%, -50%)把文字自身中心对齐到该点（否则会偏右下） -
<hr>必须清除默认 margin，否则会撑开容器高度，影响定位基准 -
background: #fff很关键 —— 覆盖掉<hr>上的文字区域，否则线条会穿过文字
Flex 布局更简洁，但需注意 hr 的 flex 行为
用 display: flex 也能实现，但要注意：<hr> 在 flex 容器里默认是块级元素，会占满一行；需设 flex: 1 让它撑开，再用 align-items: center 垂直居中。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; align-items: center; margin: 2rem 0;"> <hr style="flex: 1; margin: 0; border: none; border-top: 1px solid #ccc;"> <span style="padding: 0 0.75rem; color: #666; font-size: 0.875rem;">or</span> <hr style="flex: 1; margin: 0; border: none; border-top: 1px solid #ccc;"> </div>
- 这里用了两条
<hr>，左右各一，文字在中间 —— 更接近“分隔线被文字打断”的视觉效果 - 如果只想要单条线+文字叠加，flex 不如 absolute 精确可控
- 某些旧版 Safari 对
<hr>的 flex 行为支持不稳定，测试时建议加min-width: 0
避免常见坑：语义、可访问性和响应式断裂
这类设计容易忽略三个实际问题：
-
<hr>是语义化标签，代表内容主题的分隔；如果只是装饰性线条，应改用<div>+ border，否则 screen reader 可能误读为“分隔” - 文字若没设置足够对比度（如浅灰字配浅灰线），WCAG 会失败；建议用
color: #333或检查 contrast ratio ≥ 4.5 - 在小屏上，文字可能溢出或遮挡线条 —— 给
<span>加white-space: nowrap，并用max-width: 80vw限制容器宽度
文字和线的相对位置一旦涉及定位或 flex，就不再是纯静态流布局，缩放或字体变化时容易错位。上线前务必在 Chrome/Firefox/Safari 及 iOS/Android WebView 中手动拖动缩放条测试。
