富文本中p标签的text-indent常因内联style、display异常、父容器布局或内联替换元素而失效，应优先用p[style]{text-indent:2em!important}覆盖，并检查Computed面板确认最终值。
富文本输出的 p 标签常带内联 style，直接写 text-indent 会被覆盖
富文本编辑器（如 TinyMCE、Quill、CKEditor）导出的 HTML 几乎总在 p 标签里塞 style="margin: 0; padding: 0;" 甚至 style="text-indent: 0 !important;"。你写的全局 p { text-indent: 2em; } 很可能完全不生效。
实操建议：
- 优先用属性选择器强制覆盖：
p[style] { text-indent: 2em !important; }—— 精准命中带内联样式的段落，且不影响无style的干净段落 - 若编辑器固定输出某类 class（如
ql-align-justify），可写p.ql-align-justify { text-indent: 2em; }，避免滥用!important - 上线前必查开发者工具的 Computed 面板：确认目标
p的最终text-indent值不是0px，且display是block
text-indent 在富文本中失效的三个隐藏原因
不是样式没写对，而是渲染上下文被编辑器悄悄改了。
-
p被设为display: inline-block或display: table-cell—— 常见于编辑器封装的“段落容器”，此时text-indent完全无效 - 父容器是
display: flex或display: grid，且未给p显式设width或align-self: flex-start，导致其块级盒行为退化 - 段落开头含
<img>、<span class="emoji">等内联替换元素，缩进作用在该元素左侧，视觉上等于没动
富文本里混用 text-indent 和 padding-left 的冲突点
编辑器常给 p 加 padding-left: 16px 模拟缩进，而你又写了 text-indent: 2em，结果是首行缩进 + 整段左移，文字挤到右侧，甚至溢出容器。
立即学习“前端免费学习笔记（深入）”；
- 快速识别：打开 DevTools → Elements → 查看该
p的 Styles 面板，找所有出现padding、margin-left、text-indent的地方 - 修复策略：统一收口到 CSS 变量，例如定义
:root { --para-indent: 2em; }，然后只用text-indent: var(--para-indent);，禁用所有padding-left对段落的干预 - 特别注意：某些编辑器（如 Draft.js 导出）会把缩进逻辑写进
data-属性，需 JS 动态清理或重写渲染逻辑
移动端和高 DPI 屏下富文本缩进变弱或错位
富文本内容常忽略响应式适配，text-indent: 32px 在 iPhone 上因设备像素比（dpr=3）实际渲染为 96px 物理像素，但字体大小仍是 16px，造成缩进过宽；而 2em 在系统字体放大后又可能不足。
- 推荐组合：
text-indent: clamp(1.5em, 2em, 2.5em);—— 小屏保底 1.5em，大屏上限 2.5em，中间锚定 2em - 若项目已用 rem，且根字体随夜间模式动态变化，改用
text-indent: 2ch;（前提是字体支持ch单位，现代浏览器基本 OK） - 绝对要避开：
text-indent: 2%;—— 表格列宽或窄容器下缩进可能只剩几像素，中文排版直接崩
真正麻烦的是富文本与自定义 CSS 主题共存时的层叠顺序：编辑器注入的样式表、你写的全局 CSS、组件 scoped style、以及用户粘贴进来的带 style 的 HTML，四者权重交错。上线前必须用真实数据跑一遍 Computed Styles，别信“应该没问题”。
