text-indent 失效主因是元素非块级（如 inline 的 span、a），其他原因包括 white-space 设置、overflow 裁剪、高优先级样式覆盖、direction: rtl 方向翻转、table-cell 渲染限制、flex/grid 格式化上下文限制，以及滥用空格模拟缩进。

text-indent 为什么加了却像没加？

最常见的情况是元素根本不是块级——<span></span>、<em></em>、<a></a> 默认为 inline，text-indent 对它们完全无效。浏览器压根不给生成“首行盒”，自然无处缩进。

另外几个隐蔽但高频的失效原因：

• white-space: nowrap 或 white-space: pre：前者强制单行，后者保留原始空格，都让“首行”语义混乱
• 父容器设了 overflow: hidden 且缩进超出左边界，内容被裁掉，看起来就像没生效
• 被更高优先级样式覆盖，比如全局重置里写了 p { text-indent: 0 !important }
• direction: rtl 下缩进方向自动翻转到右侧，若你没注意对齐方式，会误判为“失效”

表格单元格（<td>）里 text-indent 不动？试试 padding-left <p><code><td> 和 <code><th> 是 <code>display: table-cell，它虽属块级上下文，但格式化规则特殊：若内容太短、未换行，浏览器可能不触发首行盒渲染，text-indent 就“悬空”了。

更稳的解法是绕过语义，直接控制位置：

• 对 <td> 直接加 <code>padding-left: 2em：不依赖换行，所有场景都生效，视觉一致
• 需要严格匹配印刷规范（如导出 PDF）时，用包裹 <div style="text-indent: 2em;">，把缩进逻辑收进块级子元素 <li>绝对别对整个 <code><table> 设 <code>text-indent：它会继承下去，连表头都缩进，容易误伤

  Flex/Grid 容器里的子元素缩进不了？别硬刚 text-indent

  这不是 bug，是格式化上下文的天然限制。text-indent 在 flex item 或 grid item 上表现不稳定，尤其当主轴对齐（justify-content）或自身 display 被覆盖时，缩进常被忽略或错位。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载

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

  • 首选 padding-left: 2em：对任意 display 类型都有效，响应式友好，和 text-indent 视觉差异极小
  • 若必须保留首行缩进语义（比如配合 CSS 打印样式），可临时加 display: block，但得确认父容器未用 align-items: center 等干扰垂直对齐
  • iOS Safari 在 flex 容器内偶有渲染延迟，可加 transform: translateZ(0) 强制硬件加速（仅必要时）

  用空格或全角字符模拟缩进？快停手

  在 HTML 文本前敲两个全角空格或   ，看似省事，实则埋雷：

  • 复制粘贴时这些空格会被带出，污染纯文本内容
  • 屏幕阅读器会逐字读出  ，影响无障碍体验
  • 富文本编辑器（如 Quill、Tiptap）常自动过滤或转义连续空白，缩进瞬间消失
  • 响应式下字号变化时，空格宽度不变，缩进比例严重失真

  真正难处理的是那些从 Word/PDF 复制进来的“幽灵空格”——它们往往来自悬挂缩进、左缩进等隐藏段落格式。这类问题得靠后端清洗或前端用 normalizeWhitespace 类逻辑预处理，而不是靠 CSS 补救。