text-indent仅作用于块级元素首行，缩进值可为长度、百分比或负值；它不改变盒模型宽度，且在rtl语言中自动适配方向；单位推荐ch（更稳定），兼容旧浏览器时用em并指定中文字体。
text-indent 能缩进中文但不能缩进英文单词？
不是 text-indent 本身有问题，而是中英文排版逻辑不同：中文按字符计，英文按字宽（font metrics）算。设置 text-indent: 2em 时，若当前字体中英文字符宽度不一致（比如等宽字体下中文占 1em、英文占 0.5em），实际缩进可能不足两个“汉字位置”。
实操建议：
- 优先用
text-indent: 2ch——ch单位以 “0” 字符宽度为基准，对中文字体更稳定（多数中文字体中，“0” 和汉字等宽） - 避免用
px或rem，它们与字符视觉宽度无直接对应 - 若必须兼容老旧浏览器（如 IE9 及以下），
ch不被支持，退而使用2em并确保字体为标准中文字体（如"Microsoft YaHei", SimSun）
为什么设置了 text-indent 却没生效？
常见失效原因不是写法错，而是元素默认不支持文本格式化上下文。
典型场景和解法：
-
display: inline元素（如<span></span>）忽略text-indent—— 改为display: inline-block或block - 父容器设置了
text-align: justify且子元素是单行，浏览器可能重置首行缩进逻辑 —— 加text-align: left显式覆盖 - 元素内含
<img>或<inline-block></inline-block>子元素导致首行“不可见” ——text-indent仍生效，但缩进被浮动/内联元素遮挡，建议检查渲染层叠
text-indent 缩进后换行内容不对其？
text-indent 只作用于**首行**，后续行左边界由 padding-left 或 margin-left 控制。这是设计使然，不是 bug。
若需“悬挂缩进”或“段落整体左偏移”，不要叠加多个 text-indent：
- 想实现类似 Word 的“首行缩进 + 其余行左对齐”，保持
text-indent: 2ch即可，无需额外处理 - 想让整段文字（含首行）统一向右挪动，用
padding-left: 2ch，此时首行不再“额外”缩进 - 要模拟“负缩进 + 悬挂”，可用
text-indent: -1em; padding-left: 1em，但注意内容可能溢出容器，需配overflow-wrap: break-word
移动端 iOS Safari 中 text-indent 偏小？
iOS 15+ Safari 对 ch 单位的计算存在轻微偏差，尤其在系统字体（-apple-system）下，2ch 可能只相当于 1.8 个汉字宽度。
稳妥方案：
- 改用
text-indent: 1.6rem（假设根字号为 16px，1.6rem ≈ 25.6px，接近两个汉字宽度） - 加媒体查询针对 iOS：
@supports (-webkit-touch-callout: none) { p { text-indent: 1.6rem; } } - 避免依赖
text-indent做精确对齐——它本就是排版辅助属性，非布局工具
text-indent，而是判断该不该用它：当缩进需要响应字体变化、随字号缩放、且不破坏盒模型时，它才合适；一旦涉及多端像素级对齐或复杂嵌套，往往得切到 padding + ::before 伪元素组合方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
