text-indent 失效主因是未满足块级格式化上下文条件，仅对 block 元素首行生效；需检查 computed 样式中 display 是否为 block 且 text-indent 值非零。
text-indent 不生效，绝大多数情况不是写错了，而是渲染条件没满足——它只对块级格式化上下文里的第一行盒起作用，其他都是干扰项。
为什么 text-indent 加了却像没加
最直接的判断方式：打开浏览器开发者工具 → 找到目标 <p></p> → 切到 Computed 标签页 → 看 display 是否为 block，且 text-indent 最终值是否非零。
常见失效原因包括：
-
<p></p>被设成display: inline或inline-block—— 浏览器不生成“首行盒”，text-indent完全忽略 - 父容器用了
display: flex或display: grid——<p></p>的块级行为被覆盖，缩进计算失效 - 段落开头是
<img>、<svg></svg>或<span style="max-width:90%"></span>—— 首行盒起点落在该元素左侧，文字本身没动 - 被高权重样式覆盖，比如全局重置里写了
p { text-indent: 0 !important } -
white-space: nowrap或pre类设置破坏了“换行”语义，导致首行概念丢失
text-indent 在 Flex/Grid 容器里失效怎么办
这不是 bug，是 CSS 格式化上下文变更的自然结果。Flex item 和 Grid item 默认不参与块级格式化，text-indent 失去作用对象。
实操建议：
- 首选
padding-left: 2em—— 对任意display类型都有效，视觉几乎无差别，且响应式友好 - 若必须保留语义（如打印样式），给
<p></p>显式加display: block，并确保其width不是auto（flex item 默认值可能退化） - 别在卡片标题、导航文字等本就不该有段落语义的地方硬套
text-indent—— 那是间距问题，该用margin-left或padding-left
移动端和微信 WebView 中缩进“看起来没生效”
iOS Safari（尤其旧版）和微信内置浏览器对小字号文本的 text-indent 渲染较保守：当 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 的 font-size 小于 16px，或父容器有 -webkit-text-size-adjust: none，缩进常被跳过。
临时绕过方法：
- 给
<p></p>显式设font-size: 16px或更大再试 - 避免同时使用
transform: scale()或zoom，它们会干扰文本度量 - 微信中可加极小 hack：
text-indent: 2em; margin-left: 0.05em;—— 这个微小外边距有时能“唤醒”渲染引擎
首段不缩进，但其他段落要缩进
别用 p:first-child，它依赖 <p></p> 是父容器的第一个子元素；而实际 HTML 常在段落前有 <h1></h1>、<div class="hero"> 等，导致选择器完全不匹配。
<p>正确做法是：</p>
<ul>
<li>用 <code>p:first-of-type —— 它只看同类型元素（即所有 <p></p>）中的顺序，不受其他标签干扰
article p { text-indent: 2em; } article p:first-of-type { text-indent: 0; }
<p></p>，否则 :first-of-type 不会触发<div class="intro">
<p> 和 <code><main><p></p></main>），需分别控制，或改用更精确的选择器如 .article-content p:first-of-type
真正容易被忽略的是：缩进是否生效，不能只靠肉眼判断；必须看 Computed 样式里 text-indent 的最终值，以及 display 是否为 block。很多“失效”其实是被更高优先级样式静默覆盖，或者父容器布局模式彻底绕过了块级格式化上下文。
