text-indent 是 CSS 渲染层行为，非过滤器能实现；其失效主因是元素非块级、rich-text 剥离样式及小程序兼容性问题；可行方案需按场景选：块级+text-indent、内联 style 或伪元素模拟。

text-indent 本身不是过滤器，不能用过滤器实现首行缩进——这是最常被误解的前提。首行缩进是 CSS 排版行为，发生在渲染层；过滤器（filters）只处理模板中绑定的数据值（如字符串、数字），不干预 DOM 样式或布局。

为什么有人想用过滤器做首行缩进？

常见误判场景： - 把富文本内容（如后端返回的

段落内容

）当成纯文本，以为加两个中文空格就能“缩进” - 在 v-html 或 rich-text 渲染前，试图用过滤器给每段开头拼接    或 \u3000\u3000 - 误以为“两个字符”是数据层面操作，而非样式响应式控制

text-indent 在 uni-app 中失效的真正原因

不是过滤器没写对，而是 CSS 规则未生效，典型表现是：text-indent: 2em 写了但没缩进。根本原因有三个：

• 、 等默认 display: inline，而 text-indent 只对块级元素生效
• uni-app 的 组件会剥离或重写内联样式，外部 CSS 无法穿透作用到其内部

• 小程序平台（尤其微信）对 text-indent 的支持存在兼容性差异，iOS 微信基础库低于 2.25.0 时部分 em 计算异常

真正可行的“两个字符缩进”落地方案

分场景选择，没有银弹：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 纯文本段落（...）：给 加 display: block + text-indent: 2em，并确保父级没设 white-space: nowrap
• 富文本（）：必须用内联 style，且仅对
  生效：

  内容

  ；若后端返回无 style，需在 JS 层用正则包裹：content.replace(/

  /g, '

  ')

• 要求严格等于两个汉字宽度（如出版级排版）：放弃 em，改用伪元素模拟：::first-line { width: 2ch; display: inline-block; content: ""; }，但注意 ch 基于 “0” 字宽，对中文字体误差约 ±15%，且 iOS Safari 12+ 才稳定支持

复杂点在于：缩进是否要随字号缩放？是否要适配不同字体下的字宽波动？这些都不是过滤器能解决的——它连 DOM 都碰不到。真正在意“两个字符”，就得接受要么妥协（用 2em + 统一字体栈），要么兜底（服务端注入 style 或客户端正则修补）。