text-indent生效需满足块级上下文、内容换行及无高权重覆盖等条件；失效主因是display非block、white-space禁换行或内联替换元素打断行盒生成。
用开发者工具快速验证 text-indent 是否起作用
直接在浏览器里加一句临时样式，是最快的验证方式。打开 DevTools，选中目标 <p> 元素，在 Styles 面板顶部点击 “+” 添加新声明，输入：text-indent: 2em; border: 1px solid red;。
观察效果：如果红色边框完整包裹段落，且第一行明显右移、其余行左对齐（即只有首行缩进），说明 text-indent 生效；如果整段文字一起右移，或完全没变化，就说明被其他规则压制或根本没匹配到块级上下文。
- 边框只是辅助判断——它帮你确认元素是否“按块渲染”，而不是靠肉眼猜缩进有没有
- 别只看 computed 值里有没有
text-indent，要盯住“实际渲染结果”：首行是否动了，其他行是否没动 - 若边框显示正常但缩进不可见，检查父容器是否设了
overflow: hidden，缩进部分可能被裁掉了
text-indent 失效的三个高频原因
不是代码写错了，而是环境不满足前提条件。最常见的三类失效场景都和 CSS 渲染机制强相关：
-
<p>被父容器设成display: flex或display: grid—— 此时<p>默认是 flex item / grid item，不再生成标准块级框，text-indent直接忽略 - 元素本身是行内级，比如加了
display: inline或被富文本编辑器注入了style="display: inline;"，text-indent对行内元素无效 - 设置了
white-space: pre或white-space: nowrap—— 前者会让开头空格/制表符优先渲染，造成“双缩进”假象；后者把整段压成一行，首行概念消失
排查时该看哪些 computed 属性
不要只盯着 text-indent 的值，要连带确认它生效所需的上下文是否成立：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 查
display：必须是block、table-cell、list-item等能生成块级框的值，flex、inline、inline-block都不行 - 查
white-space：避免pre、nowrap、pre-line（后者虽保留换行但可能干扰行盒生成） - 查
direction：如果是rtl，text-indent会向右缩进，视觉上像“没动”，其实是方向翻转了 - 查
overflow和width：若父容器overflow: hidden且width过窄，缩进区域会被裁掉，看上去就是“没缩进”
为什么加了 !important 还没用
强制覆盖只是解决样式优先级问题，但无法绕过 CSS 规范限制。比如：
- 给一个
display: inline的<span>加text-indent: 2em !important，依然无效——不是权重不够，是规范根本不处理 - 在 Flex 容器里给
<p>加text-indent，即使权重最高，也因格式化上下文切换而被跳过 - 富文本输出的
<p style="text-indent: 0">，光靠外部!important可能被内联样式压制，得用p[style] { text-indent: 2em !important; }这种属性选择器才压得过
真正卡住的地方往往不在 CSS 优先级，而在 display 类型、white-space 行为、或者 RTL 方向这些底层渲染逻辑。调试时先确认“能不能生效”，再考虑“为什么没生效”。
