text-indent只作用于块级元素，必须是标准块级上下文；若设置text-indent: 2em无效，大概率因被设为display: inline或父容器为flex/grid且未触发bfc；应检查computed display值是否为block，并优先使用2em或2ch单位实现中文首行缩进。
text-indent 只作用于块级元素，<p></p> 必须是标准块级上下文
直接给 <p></p> 设置 text-indent: 2em 却没效果？大概率是它被意外设成了 display: inline 或套在了 flex/grid 容器里且父容器未触发 BFC。浏览器只对「生成块级框」的元素计算首行缩进，inline、inline-block、table-cell 都不响应 text-indent。
实操建议：
- 用浏览器开发者工具检查目标
<p></p>的 computeddisplay值，确认为block或table等块级类型 - 若父容器用了
display: flex，需给<p></p>显式加align-self: flex-start并确保其width不为auto（否则可能退化为内联行为） - 避免在
<span></span>或自定义inline元素上滥用text-indent，它不会生效
中文排版需注意 em 与 ch 单位的实际缩进宽度
text-indent: 2em 在中文字体下常被误认为「缩进两个汉字」，但 em 是当前字体的 font-size 值，不是字符宽度。例如 font-size: 16px 时，2em = 32px，而多数中文字体单字宽度约 16px，实际缩进约两个字——但若字体用了等宽变体或设置了 font-stretch，偏差就明显了。
更稳妥的做法：
- 用
text-indent: 2ch：1ch≈ 数字0的宽度，在多数中文字体中接近一个汉字宽度（前提是字体支持ch度量） - 对严格出版级排版，直接用像素值如
text-indent: 32px，并配合line-height和font-family锁定渲染一致性 - 避免混用
em和rem：若根字体缩放，rem缩进会随页面缩放变化，破坏段首对齐节奏
首行缩进与 white-space、direction 的隐式冲突
当段落含 white-space: pre、pre-wrap 或 direction: rtl 时，text-indent 行为会异常：前者可能让缩进出现在换行后第一行而非首行；后者可能导致缩进方向反向（向右缩进），尤其在混合 LTR/RTL 文本中。
排查要点：
- 检查是否误设了
white-space: pre—— 这会让所有空白符（包括缩进空格）原样保留，覆盖text-indent的自动逻辑 - 若用
direction: rtl，text-indent默认向右缩进，需配合text-align: right才符合中文 RTL 排版习惯 - 遇到「缩进出现在第二行」，先禁用
white-space相关声明，还原为默认normal
编辑器中动态插入段落时，text-indent 不继承的常见原因
富文本编辑器（如 TinyMCE、Quill、ProseMirror）插入新 <p></p> 后缩进失效，通常不是 CSS 问题，而是编辑器默认给新段落加了内联 style，比如 style="margin-top: 0;"，而该内联样式虽不影响 text-indent，却可能掩盖了你写在外部 CSS 中的规则优先级——尤其当你用了低权重要求如 p { text-indent: 2em; }，而编辑器注入了 <p style="margin: 0"></p>。
解决路径：
- 用
!important强制覆盖（临时方案）：p { text-indent: 2em !important; } - 提高选择器权重，例如用
body p或.editor-content p替代单纯p - 在编辑器初始化时配置其默认段落样式，例如 TinyMCE 的
format_p模板中显式包含text-indent
真正容易被忽略的是：缩进逻辑依赖于「段落内容可换行」。如果 <p></p> 内全是不可折行的长单词或连续英文，text-indent 仍只影响第一行，但视觉上可能完全看不出来——这时候得配合 word-break: break-word 或 overflow-wrap: break-word 才能验证缩进是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
