text-indent: 2ch是英文段落首行缩进更精准的方案，因ch单位基于“0”字符宽度，在等宽及比例字体中均比2em更贴近两个英文字符视觉宽度；而2em在英文中易因字母宽窄不一导致缩进失准，且受font-size影响而非字符度量。
text-indent 是唯一语义正确、浏览器原生支持的英文段落首行缩进方式，但英文排版对单位和上下文更敏感——2em 在中文里≈两字宽，但在英文里可能过宽或过窄，需按实际字体度量调整。
为什么 text-indent: 2em 在英文段落里看起来“缩多了”或“缩少了”
英文字符宽度不均（如 i 窄、m 宽），1em = 当前元素 font-size，但不等于一个平均字母宽度。用 2em 常导致缩进约 32px（假设 font-size: 16px），远超两个小写字母 ii 的视觉宽度，却可能小于两个大写 WW。
- 推荐改用
text-indent: 2ch：1ch ≈ 字符"0"的宽度，对等宽字体极准；对比例字体（如 Times New Roman、Georgia）也比 em 更贴近“两个字符”的直觉 - 避免
2rem或2%：rem 受根字号 JS 动态修改影响（如夜间模式），% 按父容器宽度算，和字体完全无关 - 若必须兼容 IE11 及更早版本，退回到
text-indent: 32px，但需同步设置font-size: 16px锁死基准，否则高 DPI 屏或系统缩放下会失准
text-indent 在英文段落里突然失效的三个高频原因
不是样式没写，而是渲染链断在了前端看不见的地方：
-
<p>被富文本编辑器或 CMS 输出为display: inline或display: inline-block——text-indent对非块级元素无效，强制加display: block即可修复 - 段落开头是 SVG 图标、
<img>或<span>内联元素 —— 缩进作用于该元素左侧，文字仍贴左；解决办法：在图标后加position: absolute） - 用了
white-space: nowrap（常见于表格单元格或工具提示）—— 浏览器只生成一行盒，“首行”存在但无换行，缩进像素被内容吞没；此时应改用padding-left
表格中英文段落缩进：别硬刚 text-indent
<td> 默认 display: table-cell，英文短句（如 “Yes / No”、“Pending”）几乎从不换行，text-indent 计算生效但不可见——背景色调试时会发现文字仍在左边缘。
立即学习“前端免费学习笔记（深入）”；
- 首选方案：
td, th { padding-left: 2ch; }—— 不依赖行盒，所有浏览器一致，且2ch在英文表格中比2em更稳 - 若导出 PDF 必须保留首行语义（如用 wkhtmltopdf），包裹一层
<div style="text-indent: 2ch;">…</div>，并确保该<div>是块级且有足够宽度触发换行 - 绝对不要给
<table>设text-indent：它会继承到<th>，表头文字可能意外右移
真正难的不是让英文段落缩进 2 个字符，而是确认它在 flex 容器里、在响应式断点切换后、在 Safari 的打印预览中、在屏幕阅读器解析时，都维持相同语义与视觉效果。动手前先打开开发者工具，盯着 Computed 面板看 display 是否为 block、text-indent 是否被计算为非零值、line-height 和 white-space 是否干扰了行盒生成——这比反复调数值快得多。
