text-indent是唯一不影响换行的首行缩进方案，它仅偏移第一行起始位置，后续行仍左对齐，不干扰自动换行逻辑；须确保元素为块级上下文，推荐使用2em单位以保持响应式缩进效果。
text-indent 是唯一不影响换行的首行缩进方案
想让段落首行空两格，又不干扰自动换行、不拉歪第二行——text-indent 就是为此设计的。它只移动第一行文字的起始位置，后续行仍从容器左边缘对齐，换行逻辑完全不受影响。
常见错误是用 padding-left 或 margin-left：它们会让整块内容右移，第二行也跟着右偏，视觉上变成“整段缩进”，不是中文排版意义上的“首行缩进”。
必须确保目标元素是块级上下文：p 默认是 display: block，但如果被 JS 动态设为 inline，或套在 flex 容器里且未显式重置 display，text-indent 就会静默失效。
为什么加了 text-indent 却看起来没换行变化
不是代码没生效，而是缩进被其他样式覆盖或渲染条件不满足：
立即学习“前端免费学习笔记（深入）”；
-
text-align: center或text-align: right会把文字整体拉回，抵消text-indent的偏移，结果“缩了又拉回” - 段落开头有
<img alt="如何设置HTML段落缩进不影响换行" >、<svg></svg>等内联替换元素，text-indent作用在该元素左侧，但人眼看不到位移 -
white-space: nowrap或white-space: pre禁用了换行，浏览器不生成多行盒，“首行”概念失效 - 某处写了
p { text-indent: 0 !important }（富文本编辑器输出常见），直接覆盖你的规则
最快验证方式：打开开发者工具 → 查看目标 p 的 Computed 标签页 → 确认 display 是 block，且 text-indent 计算值是你设的值（比如 2em），不是 0。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
2em 是最稳的单位选择，别用 % 或 rem
text-indent: 2em 能随当前字号缩放，在响应式页面和系统字体放大时依然保持视觉比例稳定。而：
-
2%按父容器宽度计算，窄屏下可能只剩几像素，缩进不可见 -
2rem受根字体大小控制，若项目用 JS 切换夜间模式并动态改html { font-size }，缩进会意外跳变 -
32px在高 DPI 屏或 Windows “放大文本”设置下容易失准 -
2ch语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 明显小于一个汉字
注意：2em 不等于“两个汉字宽度”，它等于当前 font-size 的两倍。在 16px 字体下是 32px，刚好接近常规中文字宽；若字体变小（如移动端 14px），缩进自动变为 28px，仍可读。
表格单元格（td/th）里 text-indent 失效怎么办
td 和 th 默认是 display: table-cell，它不保证生成标准“首行盒”，尤其内容短、单行不换行时，text-indent 常静默不触发。
别硬调 display: block —— 表格布局会乱。更可靠的做法：
- 直接给
td, th { padding-left: 2em; }：不依赖行盒，所有浏览器都认，视觉效果几乎一致 - 若需保留首行缩进语义（如导出 PDF 匹配印刷规范），用包裹
<div>：<code><td><div style="text-indent: 2em;">内容</div></td> - 调试时临时加
background: #ff0到td，看文字是否真向右偏移；如果背景框里文字还贴左顶边，说明text-indent没触发，立刻切到padding-left
真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：Flex 容器里、表格里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。
