text-indent 是 CSS 渲染层行为，非过滤器能实现；其失效主因是元素非块级、rich-text 剥离样式及小程序兼容性问题；可行方案需按场景选：块级+text-indent、内联 style 或伪元素模拟。
text-indent 本身不是过滤器，不能用过滤器实现首行缩进——这是最常被误解的前提。首行缩进是 CSS 排版行为，发生在渲染层；过滤器（filters）只处理模板中绑定的数据值（如字符串、数字），不干预 DOM 样式或布局。
为什么有人想用过滤器做首行缩进？
常见误判场景：
- 把富文本内容（如后端返回的 <p>段落内容</p>）当成纯文本，以为加两个中文空格就能“缩进”
- 在 v-html 或 rich-text 渲染前，试图用过滤器给每段开头拼接 或 \u3000\u3000
- 误以为“两个字符”是数据层面操作，而非样式响应式控制
text-indent 在 uni-app 中失效的真正原因
不是过滤器没写对，而是 CSS 规则未生效，典型表现是：text-indent: 2em 写了但没缩进。根本原因有三个：
-
<text></text>、<span></span>等默认display: inline，而text-indent只对块级元素生效 - uni-app 的
<rich-text></rich-text>组件会剥离或重写内联样式，外部 CSS 无法穿透作用到其内部<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/gongju/2488" title="uni-app"><img src="https://img.php.cn/upload/manual/001/431/639/6a6029e0c4cd4231.png" alt="uni-app" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/gongju/2488" title="uni-app">uni-app</a> <p>uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。</p> </div> <a href="/xiazai/gongju/2488" title="uni-app" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 小程序平台（尤其微信）对
text-indent的支持存在兼容性差异，iOS 微信基础库低于 2.25.0 时部分 em 计算异常
真正可行的“两个字符缩进”落地方案
分场景选择，没有银弹：
-
纯文本段落（
<view><text>...</text></view>）：给<text></text>加display: block+text-indent: 2em，并确保父级没设white-space: nowrap -
富文本（
<rich-text></rich-text>）：必须用内联 style，且仅对<p></p>生效：<p style="text-indent: 2em;">内容</p>；若后端返回无style，需在 JS 层用正则包裹：content.replace(/<p>/g, '</p> <p style="text-indent: 2em;">')</p> -
要求严格等于两个汉字宽度（如出版级排版）：放弃
em，改用伪元素模拟：::first-line { width: 2ch; display: inline-block; content: ""; }，但注意ch基于 “0” 字宽，对中文字体误差约 ±15%，且 iOS Safari 12+ 才稳定支持
复杂点在于：缩进是否要随字号缩放？是否要适配不同字体下的字宽波动？这些都不是过滤器能解决的——它连 DOM 都碰不到。真正在意“两个字符”，就得接受要么妥协（用 2em + 统一字体栈），要么兜底（服务端注入 style 或客户端正则修补）。
