text-indent缩了却“没对齐”并非失效，而是与text-align协作条件被破坏：justify需显式配text-indent，开头含内联替换元素或flex/grid父容器会干扰首行盒，应检查computed中display是否为block且text-indent值非0。
text-indent 为什么缩了却“没对齐”
不是 text-indent 失效，而是它和 text-align 的协作条件被破坏了。最常见的情况是：text-align: justify 生效了，但首行没缩进——因为你没显式写 text-indent；或者写了 text-indent: 2em，但段落开头是个 <img> 或 <svg></svg>，缩进发生在该元素左侧，文字本身没动，视觉上就是“缩了又白缩”。
另一个隐蔽坑：父容器用了 display: flex 或 display: grid，<p></p> 虽然标签还在，但它的块级盒行为被覆盖，text-indent 直接不计算。验证方式很简单：打开开发者工具 → 找到目标 <p></p> → 切到 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终值不是 0。
text-indent + text-align: justify 怎么配才真对齐
两者能一起用，但必须满足三个硬性前提：
-
text-align: justify必须作用在块级元素（如<p></p>）上，不能写在<div> 或 <code><span></span>上 -
text-indent必须显式声明，justify不会自动带缩进 - 段落不能以
white-space: nowrap、pre或pre-wrap开头，否则“首行”概念失效 -
2em没问题，但前提是font-size别设死在 12px —— 建议用1.125rem或相对视口单位（如clamp(1rem, 1.125rem, 1.25rem)）保底 - 避免
2ch：虽语义贴近汉字宽度，但 iOS Safari 对ch支持不稳定，中文字体里1ch常远小于一个汉字 - 禁用
%：text-indent: 2%按父容器宽度算，窄屏下缩进可能只有 4–6px，完全失去意义 - 慎用
rem：如果项目通过 JS 动态改html { font-size }（比如夜间模式或可访问性缩放），2rem会跟着跳变，段首对齐节奏就乱了 - 先用开发者工具定位哪条样式赢了——看 Computed 里的
text-indent值，再点旁边“show all”看来源顺序 - 如果是富文本编辑器输出，加一层更具体的权重，比如
.article-content p:not([style]) { text-indent: 2em; }，避开带内联样式的段落 - 对顽固段落，用
::first-line伪元素兜底：p::first-line { text-indent: 2em; }，虽然兼容性略低（IE 不支持），但在现代浏览器里能绕过多数样式冲突
如果段落里混了 direction: rtl 或含内联替换元素（比如 emoji、图标字体），text-indent 可能向右偏移，看起来像“反向缩进”。这时别硬调，改用 padding-left + text-align: justify 组合更可控——虽然语义弱一点，但视觉对齐有保障。
2em 缩进在小屏下太浅？这是单位选错的信号
text-indent: 2em 在桌面端看着刚好，到了手机上可能只剩 16px，中文两字宽度都不够。这不是 bug，是单位和上下文不匹配：
富文本输出或 CMS 导出的 HTML 缩进失效怎么办
这类场景最麻烦：HTML 里混着内联 style="text-indent: 0"、!important 覆盖、display: inline-block 的 <p></p>，甚至还有 <pre class="brush:php;toolbar:false;"></pre> 包裹的段落。这时候靠全局 CSS 覆盖基本没用。
实操建议分三步走：
真正容易被忽略的是 white-space 和 direction 的隐式干扰——它们不会报错，但会让缩进出现在第二行、向右偏移，或只在部分字符生效。上线前务必在真实设备上拖动文字、放大字体、切换 RTL 语言测试一遍。
