Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
text-indent: 2em是首选，因其缩进值为当前font-size两倍，在多数中文字体下视觉接近两汉字宽，具备响应式、无障碍友好、全浏览器兼容（ie9+）且不依赖具体字体宽度等优势。
直接写 text-indent: 2em 就能实现接近两汉字宽度的首行缩进，但必须确保元素是块级、没被 flex/grid 干扰、且没被更高优先级样式重置为 0。
为什么text-indent: 2em是首选单位
2em 表示“当前元素 font-size 的两倍”，中文字体下视觉上最接近传统“空两格”的效果。它不是固定像素，所以：
- 用户放大系统字体或使用无障碍缩放时，缩进同步变宽，不会显得过窄
- 响应式页面里随
font-size动态调整，无需媒体查询硬编码 - 所有现代浏览器（含 IE9+）原生支持，无兼容性风险
- 不依赖具体字体宽度——微软雅黑、思源黑体、Noto Sans SC 下都表现稳定
text-indent: 2em 失效的常见原因
加了却没缩进，大概率不是写错了，而是渲染条件被破坏：
-
<p></p>被设成display: inline或inline-block——text-indent只对块级盒生效 - 父容器用了
display: flex或display: grid，且没触发 BFC，导致子<p></p>的块级行为被覆盖 - 段落开头是
<img>或<svg></svg>等内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 某处 CSS 写了
p { text-indent: 0 !important }（富文本编辑器输出常见） -
white-space: nowrap或white-space: pre破坏了换行，“首行”概念失效
和 padding-left、px、rem 的关键区别
别把 text-indent 当成左内边距用，三者语义和行为完全不同：
-
padding-left: 2em：整块内容整体右移，第二行也缩进，不符合中文段落规范 -
text-indent: 32px：字号放大后缩进比例失衡，比如系统缩放到 150%，32px 还是 32px，但字变大了，看起来只剩半格 -
text-indent: 2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会意外跳变，破坏段首对齐节奏 -
text-indent: 2%：按父容器宽度算，窄屏下可能缩进不到 5px，完全看不出效果
表格单元格（<td>）里怎么安全缩进
<p><code>text-indent 在 <td> 中容易失效，因为：
<ul>
<li>默认 <code>display: table-cell，单行文本时浏览器可能不生成明确的“首行盒”
text-align: center 或 right 会把缩进后的文字再拉回，看起来没动text-indent: 0 !important
更稳妥的做法是：不用 text-indent，直接给 <td> 加 <code>padding-left: 2em——不依赖行盒，兼容所有表格模式；若需保留首行缩进语义（比如导出 PDF），则包裹一层 <div style="text-indent: 2em">。
<p>真正难的不是写 <code>2em，而是确认它在目标元素上是否真的被计算为非零值——打开开发者工具看 Computed 面板，盯住 display 和最终 text-indent 值，比反复改 CSS 更快定位问题。
