text-indent失效的典型原因是元素非块级上下文或被高优先级样式覆盖；需检查computed display是否为block、排除white-space/overflow干扰，并在flex/grid中改用padding-left替代。
text-indent 被覆盖的典型现象
你写了 text-indent: 2em，但段落第一行纹丝不动；或者只在部分浏览器生效；又或者加了其他 CSS 后突然失效。常见表现是：红色边框包裹的 <p></p> 元素里，文字完全左对齐，甚至整段被右移——这不是没写对，而是样式被更高优先级规则压制或语义冲突。
检查是否被 display 或 white-space 破坏
text-indent 只对块级元素生效，且依赖标准文档流中的“首行”概念。以下情况会直接让它失效：
-
display: inline或display: flex的<p></p>：必须显式设为display: block或display: table -
white-space: nowrap或white-space: pre：前者取消换行，“首行”变成整段；后者让开头空格/制表符优先渲染，造成“双缩进”假象 - 父容器设置了
overflow: hidden且text-indent值过大：缩进部分被裁剪，看起来像没生效
优先级与覆盖链排查步骤
打开 DevTools，选中段落元素，在 Styles 面板里找 text-indent 条目。如果它被划掉，说明被更高级别规则覆盖。重点查：
- 是否有
text-indent: 0来自重置样式（如 normalize.css、某些 UI 框架） - 是否被继承值干扰：比如父级
div设了text-indent: 1em，子p又没重置，结果叠加出错 - 是否用了
!important在别处强行覆盖，且没在当前规则里对等处理 - 媒体查询中是否在某个断点下覆盖了该属性（比如响应式里写了
@media (max-width: 768px) { .p { text-indent: 0 } }）
Flex/Grid 容器里 text-indent 失效怎么办
这不是 bug，是格式化上下文限制：text-indent 在 Flex item 或 Grid item 中天然不触发“首行”计算。别硬调 display，直接换思路：
- 用
padding-left: 2em替代——它不依赖首行语义，对任何 display 类型都生效，视觉效果几乎一致 - 若必须保留
text-indent语义（如打印样式兼容），给<p></p>加display: block，并确保其width不是auto（Flex item 默认 width:auto 会导致退化） - 避免在导航菜单、卡片标题等本就不该有段落语义的地方套
text-indent——那是间距问题，该用margin-left或padding-left
真正容易被忽略的是：text-indent 在浮动布局中仍从容器左边缘计算，但若段落旁有 float: left 图片，首行会绕排到图片右侧，此时缩进位置可能被遮挡——这时不是样式失效，而是视觉错觉，得重构为 Flex/Grid 或加 clear 控制流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
