text-indent 失效主因是未触发“首行盒”渲染，常见于 display 非 block、flex/grid 容器内、white-space 限制、内联替换元素开头、高权重重置或 overflow 裁剪；验证应查 Computed 中 display 和 text-indent 计算值。

text-indent 加了却没缩进，大概率不是写错了，而是浏览器压根没触发“首行盒”渲染条件。

为什么 text-indent 在

上不生效

最常见原因是

实际不是块级元素：它可能被设为 display: inline 或 inline-block；也可能套在 display: flex 或 display: grid 容器里，导致块级上下文退化。浏览器只对生成标准块级框的元素计算首行缩进。

其他高频原因包括：

• white-space: nowrap 或 white-space: pre 破坏了“首行”的语义边界
• 段落开头是 、 这类内联替换元素，缩进发生在该元素左侧，视觉上等于没动
• 某处高权重样式写了 p { text-indent: 0 !important }（富文本编辑器输出常带这个）
• 父容器设了 overflow: hidden 且缩进值超出左边界，内容被裁掉

最快验证方式：打开开发者工具 → 查看目标

的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终计算值不是 0。

text-indent 单位该用 em 还是 px？

中文排版下推荐 text-indent: 2em，不是因为它“等于两个汉字”，而是因为 em 随当前字体大小等比缩放，系统放大、阅读模式切换时缩进仍协调。固定像素如 32px 在高 DPI 屏或用户 zoom 页面时容易失准。

需避开的坑：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 2%：按父容器宽度算，窄屏下缩进可能只剩几像素
• 2rem：若项目用 JS 动态改过 html { font-size }（如夜间模式），缩进会跳变
• 2ch：语义更贴近单字宽度，但 IE 不支持，且多数中文字体中 1ch 明显小于一个汉字

表格单元格（）里 text-indent 失效怎么办

默认是 display: table-cell，它虽属块级上下文，但格式化规则特殊：若内容太短、未换行，浏览器常不生成“首行盒”，text-indent 就悬空了。

别硬调 text-indent，直接用更稳的方案：

• 给 加 padding-left: 2em：不依赖换行，所有场景都生效，视觉一致
• 需要保留首行语义（比如导出 PDF）时，用
  内容
• 绝对不要对整个 设 text-indent：它会继承到
  ，表头也被缩进

  Flex/Grid 容器里的子段落缩不进去

  这不是 bug，是格式化上下文变更的自然结果。text-indent 在 flex item 或 grid item 上表现不稳定，尤其当 justify-content 或 align-items 干扰了主轴对齐时，缩进常被忽略或错位。

  实际项目中，90% 的需求只是“第一行看起来往右移一点”，而非强依赖“首行盒”语义：

  • 首选 padding-left: 2em：对任意 display 类型都有效，响应式友好，和 text-indent 视觉差异极小
  • 必须保留语义时，给
    显式加 display: block，并确保其 width 不是 auto（flex item 默认就是 auto，可能退化）
  • iOS Safari 在 flex 容器内偶有渲染延迟，可加 transform: translateZ(0) 强制硬件加速（仅必要时）

  最容易被忽略的一点：缩进失效往往不是 CSS 写得不对，而是你正在调试的元素，它的 display 值早被某处样式、JS 或框架悄悄改掉了——先看 Computed，再改代码。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！