Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

正确做法是用标签语义化分段并配css样式，而非依赖或换行符；因html会合并空白符，无语义且破坏响应式与无障碍，而自带间距、语义和seo价值。

直接用 <p></p> 标签分段，再配 margin、line-height 和 text-indent，就能解决 80% 的长文本可读性问题；其余 20% 要靠 white-space: pre-wrap 处理带回车的原始文本，以及 overflow-wrap: break-word 应对无空格长串。

为什么不能只靠换行符或多个 <br> 分段

HTML 解析时会把源码里的回车、空格合并成单个空格，<br> 只是强制换行，不构成语义段落——它没有上下边距、不被屏幕阅读器识别为内容单元、SEO 权重极低。更糟的是，连续用 <br> 容易导致响应式断点错乱，小屏下段间距失控。

• 正确做法：按语义切分逻辑块，每个块用一对 <p></p> 包裹
• 错误写法：<p>第一段</p> <br><br><p>第二段</p> —— 多余 <br> 破坏默认 margin 节奏
• 别在 <p></p> 里嵌 <div> 或另一个 <code><p></p>，HTML5 不允许嵌套段落

  white-space: pre-wrap 什么时候必须用

  用户从 <textarea></textarea> 提交的带换行的评论、日志、Markdown 渲染后的内容，如果直接塞进 <p></p>，浏览器会把 \n 当空格处理，整段“塌”成一行。此时 white-space: normal 会丢掉原始换行，white-space: pre 又不折行导致横向溢出。

  • 唯一解：white-space: pre-wrap —— 保留所有 \n、\t 和空格，同时允许在容器右边界自动折行
  • 适用场景：<div class="comment-body"> 这类非语义化容器，而非 <code><p></p>（<p></p> 默认就是 normal，强行加 pre-wrap 可能破坏首行缩进）
  • 注意：text-overflow: ellipsis 和 pre-wrap 冲突，省略号不会出现

  Flex 布局里文字不换行？先查 min-width: 0

  明明写了 overflow-wrap: break-word，文字还是溢出撑破容器，90% 是因为父容器用了 display: flex，而文本所在子元素没设 min-width: 0。Flex 子项默认 min-width: auto，会阻止内容收缩，换行逻辑被绕过。

  • 修复方式：给文本容器（比如 <div class="content">）加 <code>min-width: 0，不是加在父级 <section></section> 上
  • 即使子元素用了 flex: 1，min-width: 0 仍不可省略
  • 别用 overflow: hidden 强行掩盖——它只是藏起溢出，不解决换行失效的根本问题

  text-overflow: ellipsis 不生效的三个硬条件

  只写 text-overflow: ellipsis 没用，它依赖三者同时成立，缺一不可：

  • 容器必须有明确宽度限制：width 或 max-width（百分比、rem、px 都行，但不能是 auto 或未声明）
  • 必须配 white-space: nowrap —— 强制不换行，否则文本自动折行，省略号没机会触发
  • 必须配 overflow: hidden —— 隐藏超出部分，省略号才能被“挤”出来
  • 额外前提：元素需是 block 或 inline-block；默认 span 是内联元素，得加 display: inline-block

  复杂点在于：Flex 布局中，哪怕你写了 max-width: 200px，子项仍可能无视它撑开——这时候 min-width: 0 是那个“一加就灵”的开关，而不是靠调 flex-shrink 或 flex-basis。