text-indent生效但“看起来不对”主因是首行含不可见字符（如全角空格、零宽字符）导致缩进叠加，或富文本导出的HTML结构嵌套使p元素实际display非block；应清洗文本节点并检查computed display，优先用padding-left: 2em替代。
text-indent 生效但缩进“看起来不对”怎么办
不是样式没加，而是浏览器渲染时把首行缩进算进了行盒（line box）里，而段落开头若含 、 、全角空格或零宽字符（如 \u200b），这些字符会占据视觉位置，导致缩进叠加或偏移。常见于从 Word 或微信复制粘贴后的 HTML。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
textContent提取内容后先调用.normalize()，再做正则清洗：text.replace(/[\s\u2000-\u200F\uFEFF]+/g, ' ').trim() - 避免直接对
innerHTML做替换——它会破坏标签结构，且无法识别不可见字符 - 若必须保留 HTML 结构，用
DOMParser解析后遍历文本节点，对每个node.textContent单独清洗，再写回
富文本编辑器输出的 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 为什么缩进失效
很多编辑器（如 Quill、TinyMCE）导出的 <p></p> 实际被包裹在 <div contenteditable> 或套了多层 <code><span></span>，导致其 display 计算值不是 block；或者父容器用了 display: flex，让 text-indent 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具检查目标
<p></p>的Computed → display，确认是否为block - 强制重置：给
p加display: block !important，并确保其width不是auto（flex item 下易退化） - 更稳方案：改用
padding-left: 2em替代text-indent，它不依赖块级上下文，对 flex/grid 子项也生效
后端返回的 HTML 字符串里有大量缩进空格怎么处理
这类空格不是排版需要，而是编辑器生成或 Word 导出时残留的换行、制表符、缩进空格，混在 <p></p> 标签内外，直接渲染会导致段首多出空白、段间塌陷或 PDF 导出错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 前端清洗优先走 DOM 路径：用
new DOMParser().parseFromString(html, 'text/html')，再递归遍历所有文本节点，对textContent执行.replace(/\s{2,}/g, ' ') - 禁用
innerHTML = html后不调normalize()—— 这会导致相邻空文本节点残留，影响后续提取 - 后端配合更彻底：PHP 用
strip_tags()+preg_replace('/[\s\u{200B}-\u{200F}\u{FEFF}]+/u', ' ', $text)，再 trim
white-space: pre-wrap 能不能解决缩进问题
不能。它只控制空白符是否显示，不改变缩进逻辑。比如 <p style="white-space: pre-wrap"> 文字</p> 里的全角空格会被保留，但这是“手动空格”，不是语义化的首行缩进，响应式下会失准，打印时也可能错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre-wrap只适合代码块、日志等需保留原始换行缩进的场景，别用它模拟段落首行缩进 - 真正要兼容打印、PDF、无障碍阅读的缩进，必须用
text-indent或padding-left，单位选em，别用px或% - 如果富文本字段本身就不该带缩进（比如 API 返回的是纯内容），后端应提供非 HTML 字段，前端用
<p><span>{text}</span></p>+ CSS 控制，而非在 HTML 字符串里跟空格死磕
