text-indent仅对块级元素生效，内联元素需设display:block或inline-block；中文推荐2em；禁用-9999px隐藏文字；负值慎用，需配合padding-left；flex/grid中无效；Safari需line-height≥1.2；:first-line可精细控制首行但有限制。
text-indent 只对块级元素生效
直接给 <p> 或 <div> 加 text-indent 没问题，但若作用在 <span>、<a> 这类默认内联元素上，缩进不会出现——浏览器根本不认。必须先用 display: block 或 display: inline-block 改变其渲染类型。
常见错误现象：text-indent: 2em 写了却没效果，检查父容器是否意外设置了 white-space: nowrap 或子元素被 float 脱离了正常流。
- 中文排版推荐用
text-indent: 2em（2个汉字宽度），比固定像素值更适配字体变化 - 避免用
text-indent: -9999px做“隐藏文字”——现代屏幕阅读器可能仍会读出，且影响可访问性 - 如果段落含
<img>或<svg>等替换元素，text-indent不会影响它们的位置，仅作用于纯文本内容
负值 text-indent 的实际用途和风险
负缩进常用于实现“悬挂缩进”或图片左浮动后文字绕排的微调，但容易引发内容被裁切或溢出容器。
使用场景：多见于参考文献列表、术语解释条目，要求第一行顶格、后续行缩进。
立即学习“前端免费学习笔记（深入）”；
- 安全做法是配合
padding-left补偿，例如：text-indent: -1em; padding-left: 1em - 在 flex 或 grid 容器中，
text-indent对主轴对齐无影响，别指望它替代justify-content - IE8 及更早版本不支持百分比单位的
text-indent，如需兼容，只用em或px
移动端 Safari 中 text-indent 失效的典型原因
不是 bug，而是 Safari 对 text-indent 和 line-height 的组合渲染有特殊处理：当 line-height 小于字体大小时，首行基线偏移可能导致缩进视觉丢失。
常见错误现象：PC 浏览器正常，iOS 微信内置浏览器或 Safari 里首行看起来没缩进，放大看其实有，但被截掉了。
- 确保
line-height≥1.2（尤其在小字号下） - 避免在
<pre>或设置了white-space: pre的元素上依赖text-indent——它会被空格和换行覆盖 - 如果用了 Web Font，等字体加载完成后再应用缩进样式，否则 FOUT 期间可能错位
用 CSS :first-line 伪元素做更精细控制
text-indent 是最简方案，但无法单独控制首行其他样式（比如首行加粗、变色）。这时 :first-line 更合适，但它有明确限制：只能用于块级容器，且部分属性不被支持（如 margin、padding、height）。
性能影响极小，但要注意兼容性边界：
-
:first-line在 Firefox 中对<table>子元素无效 - 不能嵌套写，如
p:first-line span是非法选择器 - 若段落内容由 JS 动态插入，需确保 DOM 更新后样式能重计算——多数情况自动触发，无需额外干预
复杂点在于：当首行刚好被换行符或 <br> 截断时，:first-line 仍以视觉首行为准，而 text-indent 始终作用于整个段落的第一逻辑行。这个差异在响应式断点切换时容易被忽略。
