Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

text-indent仅对生成块级框的元素生效，失效主因是display非block、flex/grid布局干扰、内联替换元素前置、高权重重置或white-space禁用换行；推荐用2em单位，表格中宜用padding-left替代。

text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，但直接写 text-indent: 2em 却没效果，大概率不是代码错了，而是渲染条件没满足。

为什么 text-indent 加了却没缩进

浏览器只对「生成块级框」的元素计算首行缩进，<p></p> 被改过显示模式或嵌在特殊布局里，就直接失效：

• <p></p> 被设成了 display: inline 或 inline-block —— 浏览器压根不识别“首行”概念
• 父容器用了 display: flex 或 display: grid，且没触发 BFC，<p></p> 的块级行为被覆盖
• 段落开头是 <img>、<svg></svg> 等内联替换元素，缩进发生在该元素左侧，视觉上等于没动
• 某处高权重样式写了 p { text-indent: 0 !important }（富文本编辑器输出常见）
• 用了 white-space: nowrap 或 white-space: pre —— 换行被禁用，“首行”失去意义

最快验证方式：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终值不是 0。

text-indent 该用什么单位才靠谱

单位选错，缩进在响应式、系统字体放大或不同设备下就会“漂移”或“错位”：

• 2em：最稳妥。1em ≈ 当前 font-size，缩进随字号等比缩放，中文下视觉接近两字符宽度
• 2ch：语义更准（1ch ≈ 字符 "0" 宽度），但 IE 不支持，且多数中文字体里 1ch 小于一个汉字
• 32px 或 20px：仅限字体大小绝对固定的静态页；系统缩放、DPI 变化时会失准
• 2%：按父容器宽度计算，和字体无关——窄屏下缩进可能只剩几像素，完全不够
• 2rem：若项目用 JS 动态改 html { font-size }（如夜间模式），缩进会意外跳变

别用负值或百分比兼容 IE8；它对 text-indent: -1em 和 text-indent: 5% 支持极不稳定，尤其配合 direction: rtl 时容易错位。

表格单元格（<td>）里怎么缩进 <p><code>text-indent 在 <td> 和 <code><th> 中常失效，因为它们默认是 <code>display: table-cell，需内容换行才能生成明确的“首行盒”：

• 短文本（如 “是”、“否”）没换行 → 缩进像素被内容吞没，实际生效却看不见
• 单元格设了 text-align: center 或 right → text-indent 仍计算，但对齐覆盖偏移，“缩了又拉回”
• 更稳妥方案是绕过“首行”语义：直接给 <td> 加 <code>padding-left: 2em，不依赖行盒，兼容所有表格模式
• 若需保留印刷规范语义（如导出 PDF），可包裹一层 <div>：<code><td><div style="text-indent: 2em;">内容</div></td>

  调试建议：临时加 background: #ff0 到 <td>，观察文字是否真的向右偏移；若背景框内文字居左顶边，说明 <code>text-indent 没触发，该换 padding-left。

  真正难的不是写那行 text-indent: 2em，而是确认它在各种嵌套、布局、字体、设备条件下都稳定生效——尤其是 display 值、white-space 行为、以及高权重样式的隐式覆盖，最容易被忽略。