Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

text-indent是实现段落首行缩进最直接、语义正确且兼容性佳的方案，推荐使用2em（相对当前字体大小），避免用 、padding-left或margin-left等错误方式。

用 text-indent 是最直接也最可控的方式

浏览器默认不会给 <p></p> 段落首行缩进，这不是 bug，是规范行为。想实现中文排版常见的“两个汉字宽度”缩进，text-indent 是唯一语义正确、兼容性好、不影响布局流的方案。

• 缩进值推荐用 2em（相对当前字体大小），比固定像素（如 32px）更适应响应式和用户字号调整
• 不要用   或空格字符硬塞——会导致复制粘贴异常、屏幕阅读器误读、SEO 语义污染
• 避免对所有 <p></p> 全局设置，比如标题后紧跟的段落、列表项里的 <p></p> 往往不该缩进，建议加 class 控制：<p class="indent"></p>

.indent {
  text-indent: 2em;
}

为什么不用 padding-left 或 margin-left

看起来也能“推”出空白，但本质是错位的：

• padding-left 会让整个段落内容区左移，导致行尾可能提前换行，尤其在窄屏下更明显
• margin-left 更危险：它把整个 <p></p> 块往外推，会破坏与上下元素的垂直间距关系，还可能让浮动或 Flex 布局错乱
• 两者都会让首行缩进“不独立”——你改的是盒子位置，不是文字排版行为；而 text-indent 专为这个场景设计，只动第一行文本

遇到 <blockquote></blockquote> 或列表里嵌套段落怎么办

这些容器常自带样式，容易覆盖或干扰 text-indent：

• <blockquote></blockquote> 默认有 margin 和斜体，先重置再加缩进：blockquote p { text-indent: 2em; margin: 0; }
• <li> 内的 <p></p>：很多 CMS 或框架会自动包裹，此时要提高选择器优先级，比如 li > p.indent，避免被 li p 的通用规则吞掉
• 如果用了 CSS-in-JS 或 Shadow DOM，注意样式作用域——text-indent 必须能穿透到目标 <p></p> 元素上，否则无效

移动端或大字号用户下缩进变怪？检查是否用了绝对单位

text-indent: 32px 在 iPhone 上可能缩得太狠，在 24px 字号下甚至超过半行；text-indent: 2ch 看似合理，但 ch 单位依赖“0”字宽，中文字体下不可靠。

• 坚持用 em：1em = 当前元素 font-size，2em ≈ 两个汉字自然宽度
• 如果必须精确到字符数（比如强制缩进两个中文字符），可用 text-indent: calc(2 * 1em)，但没必要——2em 已足够稳定
• 别忘了测试系统字号放大（如 iOS「更大字体」开启时），em 会自动适配，px 就会僵住

缩进这事看着小，但混用单位、忽略语义、硬塞空格，后面维护起来反而更费劲。真正优雅，是选对属性，然后让它安静地待在该在的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！