text-indent 是唯一能批量控制段落首行缩进的语义正确方案,但仅当 p 为标准块级框(display: block)且未被 inline/display 覆盖、无 !important 覆盖、无前置内联替换元素、white-space 允许换行时才生效;表格中应改用 padding-left。

text-indent 是唯一能批量控制段落首行缩进的语义正确方案,直接写 p { text-indent: 2em; } 就够了——但多数人加了没效果,不是代码错,是渲染条件被悄悄破坏了。
为什么 p { text-indent: 2em; } 批量设了却没反应
浏览器只对「生成标准块级框」的 p 计算首行缩进,以下情况会让整条规则失效:
-
p被富文本编辑器或 CMS 强制设成display: inline或display: inline-block - 父容器用了
display: flex或display: grid,且没触发 BFC,p的块级行为被覆盖 - 某处写了
p { text-indent: 0 !important; }(常见于后台粘贴的 HTML) -
p开头有、等内联替换元素,缩进发生在该元素左侧,视觉上等于没动 - 用了
white-space: nowrap或white-space: pre,换行被禁用,“首行”概念消失
最快验证法:打开开发者工具 → Computed 面板 → 查目标 p 的 display 是否为 block,且 text-indent 最终值不是 0。
表格里批量缩进 td 和 th 的可靠写法
text-indent 在表格单元格中大概率失效,因为 td 默认是 display: table-cell,不生成标准“首行盒”,尤其内容短、未换行时,缩进像素直接被吞掉。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 最稳妥的批量方案:
td, th { padding-left: 2em; }——不依赖行盒,所有浏览器都认 - 若导出 PDF 必须保留首行缩进语义(如印刷规范),就统一包一层
div:内容 - 调试时临时加
background: #ff0到td上,如果文字仍贴左,说明text-indent根本没触发,立刻切到padding-left
排除特定段落(首段、标题、引用)的缩进
全局设 p { text-indent: 2em; } 很方便,但中文排版必须处理例外:
- 首段不缩进:
.content p:first-of-type { text-indent: 0; margin-top: 0; }(margin-top: 0必须同步加,否则默认边距叠加造成顶部空隙过大) - 标题类段落(如
):p.title { text-indent: 0; },别用:not()写复杂选择器,优先级易失控 - 引用段落反向缩进:
blockquote p { text-indent: -1em; padding-left: 1em; }(负缩进 + 左内边距防文字溢出)
真正难的不是写对那行 text-indent: 2em,而是确认它在所有上下文里都按预期工作:Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。动手前先盯紧 Computed 面板,比反复调数值管用得多。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










