text-indent 失效主因是浏览器未生成“首行盒”，常见于 p 非块级元素、flex/grid 容器中退化、内联元素干扰、white-space 限制或被重置样式覆盖；表格单元格应改用 padding-left，flex/grid 中推荐 padding-left 替代，移动端需注意字号与渲染兼容性。
text-indent 失效不是代码写错了，而是浏览器压根没生成“首行盒”——最常见原因是 p 不是块级元素，或被父容器的布局规则压制了。
为什么 text-indent 加了却像没加？
它只对生成「块级框」的元素起作用，而很多场景下 p 已经不是标准块级上下文：
-
p被设为display: inline或inline-block（比如富文本编辑器输出、CSS 重置样式覆盖） - 父容器是
display: flex或display: grid，p作为子项退化为 flex item / grid item，失去块级盒行为 -
p开头有<img>、<svg></svg>或vertical-align非默认值的内联元素，干扰首行盒生成 - 用了
white-space: nowrap或white-space: pre，让“首行”语义失效 - 某处写了
p { text-indent: 0 !important }（常见于 UI 框架或 CMS 导出 HTML）
最快验证方式：打开开发者工具 → 查看目标 p 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。
text-indent 在表格单元格里不生效怎么办
<td> 和 <code><th> 默认是 <code>display: table-cell，它虽属块级上下文，但格式化规则特殊：内容短、未换行时，浏览器常不触发首行盒，text-indent 就“悬空”。
- 首选方案：
td, th { padding-left: 2em; }—— 不依赖换行，所有浏览器都认，视觉一致 - 必须保留首行缩进语义（如导出 PDF）：
<td><div style="text-indent: 2em;">内容</div></td> - 调试技巧：临时给
td加background: #ff0，若文字仍在背景左边缘贴边，说明text-indent没触发，立刻切到padding-left
Flex/Grid 容器里的段落缩进不了？别硬刚 text-indent
这不是 bug，是格式化上下文变更的自然结果。强行加 display: block 可能解决部分情况，但更稳的做法是换思路：
- 用
padding-left: 2em替代 —— 对任意display类型都有效，响应式友好，和text-indent视觉差异极小 - 若必须保留语义，显式写
p { display: block; width: 100%; }（注意：flex item 默认width: auto可能导致退化） - 别在导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方硬套
text-indent—— 那是间距问题，该用margin-left或padding-left
移动端 Safari / 微信 WebView 缩进不显示？
iOS Safari（尤其旧版）和微信内置浏览器对小字号排版有主动优化，当 p 的 font-size 小于 16px 时，有时会忽略 text-indent。
- 显式设置
font-size: 16px或更大再试 - 避免在
p上同时用transform: scale()或zoom，它们会干扰文本度量 - 微信中可加一行 hack：
text-indent: 2em; margin-left: 0.05em;（极小左外边距能“唤醒”渲染）
真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
