text-indent 无效最常见的原因是元素非块级或受 flex/grid 等上下文影响；中文首行缩进推荐用 2ch，避免用 em/rem；它仅作用于第一行开头，不影响换行对齐，但需注意 RTL、float 和无障碍问题。
text-indent 为什么设了没反应
最常见的原因是元素没有定义 display 为块级（如 block 或 inline-block），或者被 white-space: nowrap、flex 容器等上下文覆盖。它只对块级盒子生效，inline 元素（比如纯文本节点、span）直接设 text-indent 是无效的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查目标元素是否是
p、div等默认块级标签；如果不是，加display: block - 避免在
display: flex或display: grid的直接子元素上依赖text-indent，改用padding-left更可控 - 确认没被重置样式（比如某些 CSS 框架会全局设
text-indent: 0）
中文段落首行缩进 2 字符怎么写才准
CSS 没有“汉字字符宽”这个单位，text-indent: 2em 看似合理，但实际取决于当前字体的 em 值——等宽字体下 1em ≈ 1 字符宽，而多数中文字体（如 Noto Sans CJK、PingFang SC）的 em 是设计尺寸，不一定等于视觉字宽。更稳妥的是用 ch 单位：1ch = 当前字体中 “0” 字符的宽度，在多数中文字体里接近一个汉字宽度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
text-indent: 2ch，兼容性到 Chrome 45+/Firefox 31+/Safari 9+，现代项目基本可用 - 如果需兼容 IE，退而用
text-indent: 32px（假设字号 16px，2 字符≈32px），但需配合font-size固定或媒体查询动态调整 - 避免用
text-indent: 2rem，它随根字号缩放，和“字符数”语义无关
text-indent 影响换行和对齐吗
不影响。text-indent 只作用于**第一行开头的空白**，后续行照常左对齐（或按 text-align 对齐）。但它会和 text-align、direction 一起参与行盒布局计算，尤其当内容含 RTL 文本（如阿拉伯语）时，text-indent 会出现在行末而非行首。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 混合中英文排版时，确保父容器
direction: ltr（默认），否则中文段落可能右缩进 - 若段落内含
float元素，text-indent仍从内容区域左边缘起算，不会避开浮动元素 —— 这点常被误认为“缩进失效” - 不推荐用
text-indent实现悬挂缩进（hanging indent），应改用padding-left+ 负margin-left组合
用 text-indent 做“隐藏文字”要小心什么
有人用 text-indent: -9999px 配合 overflow: hidden 实现 SEO 友好图片替换，但这在高倍屏（如 macOS Retina、Windows 缩放 125%+）下容易漏出文字，且部分读屏器行为不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 现代项目请用
clip-path或aria-hidden="true"+ 视觉隐藏类替代，例如：position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; - 若必须用
text-indent，至少加上overflow: hidden和height: auto（防塌陷），并测试缩放 150% 下是否溢出 - 注意：
text-indent不影响屏幕阅读器读取，它只是视觉偏移，不是语义隐藏
真正难的不是写 text-indent: 2ch，而是判断什么时候不该用它 —— 尤其当父容器用了 Flex/Grid、内容含双向文本、或需要无障碍保障时，缩进逻辑会悄悄失效。
