text-indent不生效主因是元素非块级上下文，如flex/grid容器、inline显示或white-space限制；应查computed中display是否为block及text-indent值是否被覆盖。
text-indent 不生效，八成不是写错了，而是渲染条件没满足——它只对块级框起作用，且极易被布局上下文或样式覆盖。
为什么 text-indent 加了却像没加
浏览器根本不会给非块级元素生成“首行盒”，text-indent 就无处作用。最常见的是：<p> 被父容器设为 display: flex 或 display: grid，或者自身被改成 display: inline / inline-block；也可能是富文本编辑器输出的 <p> 实际被套在 <div class="ql-editor"> 这类 inline 容器里。
其他高频原因包括：
-
white-space: nowrap或white-space: pre破坏换行逻辑，“首行”语义失效 - 父容器设了
overflow: hidden且缩进超出左边界，内容被裁掉 - 全局重置样式写了
p { text-indent: 0 !important }，直接覆盖 - 段落开头是
<img>、<svg>等内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - iOS Safari 或微信 WebView 对小字号（
font-size < 16px）主动忽略缩进
怎么快速验证是否真生效
别猜，直接开开发者工具 → 找到目标 <p> → 切到 Computed 标签页，确认两点：
立即学习“前端免费学习笔记（深入）”；
-
display的最终值是block（不是inline、flex、grid） -
text-indent的最终值不是0或initial，且单位合理（如2em）
如果其中一项不满足，就说明问题不在 text-indent 值本身，而在上下文或覆盖规则。
text-indent 在 Flex/Grid 容器里失效怎么办
这不是 bug，是格式化上下文的天然限制：text-indent 在 flex item 或 grid item 上表现不可靠，尤其当 justify-content 或 align-items 干扰了块级行为时。
更稳的解法是绕过语义，改用位置控制：
- 首选
padding-left: 2em：对任意display类型都有效，响应式友好，视觉差异极小 - 若必须保留首行语义（如打印样式），给
<p>显式加display: block，并确保其width不是auto（Flex item 默认width: auto可能导致退化） - 别在导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方硬套
text-indent——那是间距问题，该用margin-left或padding-left
弹窗/富文本里 text-indent 失效的特殊处理
弹窗内容常由 JS 动态注入，或来自 CMS 富文本编辑器，结构和样式更不可控。常见陷阱：
- 内容包裹在
<div>里但未设display: block，text-indent直接无效 - 编辑器输出 HTML 没闭合
<p>标签，DOM 结构不合法，浏览器解析异常 - 样式被 Shadow DOM 或 iframe 隔离，外层 CSS 无法穿透
- 微信 WebView 中，有时需加微调 hack：
text-indent: 2em; margin-left: 0.05em;来“唤醒”渲染
真正难处理的是嵌套在 iframe 或 Shadow DOM 里的弹窗，text-indent 会被作用域隔离；这种场景得在对应上下文内单独注入样式，不能只靠外层 CSS。
复杂点往往不在属性本身，而在于你没意识到它依赖的“块级框”正在被 flex、grid、inline 化或字体渲染策略悄悄瓦解。每次失效，优先查 computed display 和 text-indent 值，比反复改数值更省时间。
