text-indent 失效主因是元素非块级（如 inline 的 span、a），其他原因包括 white-space 设置、overflow 裁剪、高优先级样式覆盖、direction: rtl 方向翻转、table-cell 渲染限制、flex/grid 格式化上下文限制，以及滥用空格模拟缩进。
text-indent 为什么加了却像没加？
最常见的情况是元素根本不是块级——<span>、<em>、<a> 默认为 inline，text-indent 对它们完全无效。浏览器压根不给生成“首行盒”，自然无处缩进。
另外几个隐蔽但高频的失效原因：
-
white-space: nowrap或white-space: pre：前者强制单行，后者保留原始空格，都让“首行”语义混乱 - 父容器设了
overflow: hidden且缩进超出左边界，内容被裁掉，看起来就像没生效 - 被更高优先级样式覆盖，比如全局重置里写了
p { text-indent: 0 !important } -
direction: rtl下缩进方向自动翻转到右侧，若你没注意对齐方式，会误判为“失效”
表格单元格（<td>）里 text-indent 不动？试试 padding-left
<td> 和 <th> 是 display: table-cell，它虽属块级上下文，但格式化规则特殊：若内容太短、未换行，浏览器可能不触发首行盒渲染，text-indent 就“悬空”了。
更稳的解法是绕过语义，直接控制位置：
立即学习“前端免费学习笔记（深入）”；
- 对
<td>直接加padding-left: 2em：不依赖换行，所有场景都生效，视觉一致 - 需要严格匹配印刷规范（如导出 PDF）时，用包裹
<div style="text-indent: 2em;">，把缩进逻辑收进块级子元素 - 绝对别对整个
<table>设text-indent：它会继承下去，连表头都缩进，容易误伤
Flex/Grid 容器里的子元素缩进不了？别硬刚 text-indent
这不是 bug，是格式化上下文的天然限制。text-indent 在 flex item 或 grid item 上表现不稳定，尤其当主轴对齐（justify-content）或自身 display 被覆盖时，缩进常被忽略或错位。
实际项目中，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 补救。
