text-indent 仅缩进首行，是浏览器原生支持的首行缩进属性；设为2em最稳妥，负值可实现悬挂缩进；失效常见原因包括display非block、内联替换元素干扰、white-space异常及table-cell限制。

text-indent 只缩进首行，这是它的本职工作

浏览器原生就支持首行缩进，靠的就是 text-indent 属性。它天生只影响段落的第一行，后续行自动对齐左边界——这正是“首行与其他行不同缩进”的标准实现方式，不需要额外 hack。

常见错误是误用 padding-left：它会让整段文字右移，所有行都缩进相同距离，完全达不到“仅首行不同”的效果。

• text-indent: 2em 是中文排版最稳妥的写法，随字号缩放，响应式友好
• 若设成负值（如 text-indent: -1em），可实现悬挂缩进（参考文献常用）
• 别给 <p></p> 加 display: inline 或套在 flex 容器里不触发 BFC——否则 text-indent 直接失效

为什么加了 text-indent 却看不出首行缩进

不是代码没写对，而是渲染条件没满足。打开开发者工具，直接看目标元素的 Computed 标签页，重点确认两件事：display 是否为 block，text-indent 的最终计算值是否非零。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 段落开头有 <img>、<svg></svg> 等内联替换元素时，缩进发生在该元素左侧，视觉上像没动
• white-space: nowrap 或 white-space: pre 会破坏换行逻辑，“首行”概念失效
• 富文本编辑器输出的 HTML 常带高权重内联样式，比如 style="text-indent: 0 !important"，直接覆盖你的设置
• 父容器用了 display: grid 或 display: flex，且未显式让 <p></p> 生成独立块级盒

表格单元格（<td>）里怎么让首行缩进生效 <p><code>text-indent 在 <td> 中理论上可用，但实际极易失效——因为 <code>table-cell 的格式化规则特殊，单行短文本常不生成明确的“首行盒”，缩进像素被内容吞没，肉眼不可见。

• 最可靠做法：直接给 <td> 加 <code>padding-left: 2em，不依赖行盒，兼容所有表格模式
• 若必须保留语义（例如导出 PDF 需匹配印刷规范），用 <td><div style="text-indent: 2em;">内容</div></td>
• 避免对整个 <table> 设置 <code>text-indent：它会继承到 <th>，表头可能被意外缩进 <li>调试时临时加 <code>background: #ff0 到 <td>，看文字是否真向右偏移；若文字仍顶左，说明 <code>text-indent 没触发

  em 和 ch 单位在中文缩进里的实际差异

  2em 被广泛推荐，但它不是“两个汉字宽度”的精确等价物——它是当前 font-size 的两倍，而一个汉字的实际像素宽度取决于字体设计（比如等宽字体 vs. 微软雅黑）。2ch 更贴近字符语义（1ch ≈ 字符 "0" 的宽度），但在 IE 和部分中文字体中支持不稳定。

  • 日常网页开发用 2em 就够了：它随系统字体放大/缩放，无障碍友好，兼容性拉满
  • 出版级静态页或 Canvas 文本可考虑 text-indent: 32px，但需锁定 font-family 和 font-size
  • 别用 2%：缩进量随列宽变化，窄屏下可能只剩几像素，根本看不出效果
  • 慎用 2rem：如果项目用 JS 动态改 html { font-size }（如夜间模式），缩进会跟着跳变，破坏段首对齐节奏

  真正容易被忽略的是 white-space 和 direction 的隐式干扰：当段落含 white-space: pre-wrap 或混用 direction: rtl 时，text-indent 可能缩错行或缩反方向。这类场景下，先验证 computed 值，再决定是否绕过语义、改用 padding-left 或包裹 <div>。</div>

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