text-indent: 2em是唯一语义正确且响应式可靠的首行缩进方案;失效主因是元素非块级、父容器为flex/grid、首行含替换元素、高权重样式覆盖或white-space禁用换行,需通过computed面板验证display是否为block且text-indent值确为2em。

text-indent: 2em 是唯一能真正统一控制段落首行缩进的方案;其他方式要么破坏语义,要么在响应式、富文本或表格中当场失效。
为什么直接写 p { text-indent: 2em; } 有时没效果
不是 CSS 写错了,而是浏览器根本没触发“首行”渲染逻辑:
-
p被设成display: inline或inline-block——text-indent对非块级元素无效 - 父容器用了
display: flex或display: grid,子p的块级格式化上下文被绕过 - 段落开头是
<img>或<svg></svg>,缩进发生在该内联替换元素左侧,视觉上“看不见” - 富文本编辑器输出的 HTML 带了
text-indent: 0 !important,直接覆盖你的规则 -
white-space: nowrap让整段变成单行,“首行”概念消失
调试最快办法:打开开发者工具 → Computed 面板 → 看目标 p 的 display 是否为 block,且 text-indent 最终值是否真为 2em。
表格里 td 和 th 怎么缩进
text-indent 在 td 里大概率失效,因为 display: table-cell 不生成标准“首行盒”,尤其内容短、未换行时。
- 最稳妥方案:
td, th { padding-left: 2em; }—— 不依赖行盒,所有浏览器都认 - 若导出 PDF 必须保留首行缩进语义(如印刷规范),就包一层
<div>:<code><td><div style="text-indent: 2em;">内容</div></td> - 临时验证:给
td加background: #ff0,如果文字还在背景框最左边,说明text-indent没生效,立刻切到padding-left - 首段不缩进 + 清除顶部空白:
.article p:first-of-type { text-indent: 0; margin-top: 0; } - 引用段落做悬挂缩进:
blockquote p { text-indent: -1em; padding-left: 1em; }(负缩进 + 左内边距防溢出) - 标题类段落(如
<p class="title"></p>):p.title { text-indent: 0; } - 避免用
margin-left或padding-left模拟缩进——它们会整体平移整个p,破坏两端对齐和响应式布局
统一缩进但要排除首段、标题、引用等特殊情况
全局设 p { text-indent: 2em; } 很方便,但中文排版实际需要例外处理。别用 :not() 写复杂选择器,优先级容易失控。
真正难的不是写出那行 text-indent: 2em,而是确认它在富文本输出、Flex 容器、打印预览、系统字体放大等所有上下文里都按预期工作。每次加新布局或引入 CMS 内容前,记得再看一眼 Computed 面板里的 display 和 text-indent 值——这比反复调数值快十倍。











