应优先通过浏览器开发者工具的Computed面板定位text-indent真实生效来源，再针对性覆盖：内联样式需用p[style]{text-indent:2em!important}，第三方CSS需提升选择器优先级，Flex/Grid容器中text-indent可能失效，此时改用padding-left模拟。
直接用更高优先级的 text-indent 声明覆盖，但必须先确认原缩进来源——是内联样式、富文本输出、还是高权重 CSS 规则？盲目加 !important 可能掩盖结构问题。
检查 computed 样式，定位真实生效的 text-indent
浏览器开发者工具的 Computed 面板才是唯一可信依据。点开目标 <p></p> 元素，展开 text-indent 项，看最终值和来源：
- 若显示
0px或0em，说明已有规则设为 0，你得覆盖那个值 - 若来源是
（即内联样式），普通 CSS 选择器无法覆盖，必须用p[style] { text-indent: 2em !important; } - 若来源是第三方 CSS（如富文本编辑器注入的
.ql-editor p），你的选择器优先级需不低于它，比如加父级前缀：.article-content p
应对常见缩进干扰源
不是所有“看起来像缩进”的效果都来自 text-indent，别只盯着一个属性改：
-
padding-left或margin-left：整段左移，不是首行缩进。用开发者工具检查padding和margin的 computed 值，一并重置：p { padding-left: 0; margin-left: 0; } -
display: inline-block或float：text-indent在非块级元素上无效。强制恢复：p { display: block; } -
white-space: pre或nowrap：破坏换行逻辑，text-indent失效。统一设回：p { white-space: normal; }
用更精准的选择器避免误伤
全局写 p { text-indent: 2em; } 容易把标题、引用、按钮文字也带上缩进。实际项目中应分层控制：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 正文段落：
.article-body p { text-indent: 2em; } - 排除首段：
.article-body p:first-of-type { text-indent: 0; } - 排除引用：
.article-body blockquote p { text-indent: 0; } - 富文本内嵌段落：
.article-body .ql-editor p { text-indent: 2em !important; }（仅当确认无法修改输出源时）
注意 text-indent 在 Flex/Grid 容器中的失效场景
当 <p></p> 父容器是 display: flex 或 display: grid，且未触发 BFC 时，text-indent 常被忽略。这不是 bug，而是布局模型差异：
- 临时解法：给
p加align-self: flex-start并确保display: block - 稳妥解法：改用
padding-left模拟缩进（仅限该容器内）：.flex-container p { padding-left: 2em; text-indent: 0; } - 关键验证：打开 Computed 面板，确认
display是block，且text-indent值不为0
真正难的不是覆盖某个值，而是搞清缩进到底是谁在控制——可能是某行内联 style，可能是编辑器 JS 动态注入，也可能是父容器 layout 把块级行为吃掉了。动手前先看 Computed，比反复刷新页面有效得多。
