text-indent 对 p 标签生效但中文段首不显缩进，主因是 text-align: justify、子元素 display:inline-block 破坏首行盒、ios/微信浏览器小字号渲染优化或 margin/padding 干扰；推荐用 text-indent: 2em。
text-indent 对 p 标签生效但不缩进中文段首？
默认情况下 text-indent 能正常作用于 <p></p>，但如果你发现中文段落首行没缩进，大概率是父容器设置了 text-align: justify 或用了某些字体渲染机制（如 Chrome 对中文字体的微调），导致视觉上“缩进了却看不出来”。更常见的是——你忘了重置 margin 和 padding，让外边距干扰了内缩进的视觉判断。
实操建议：
- 先确认
<p></p>没被其他 CSS（比如全局重置样式）设成text-indent: 0或display: inline - 用
em单位比px更稳妥，例如text-indent: 2em—— 这样缩进宽度随当前字体大小自适应 - 若用
rem，需确保根元素font-size已定义，否则可能缩进为 0 - 避免对
<p></p>同时设text-align: justify+text-indent，部分浏览器在两端对齐下会吞掉首行缩进的像素
p 标签里有 inline 元素时 text-indent 失效？
text-indent 只影响块级容器的**第一行盒（line box）的起始位置**，如果 <p></p> 开头是 <span></span>、<strong></strong> 或空格/换行符，而这些内容被 CSS 设成了 display: inline-block 或带 vertical-align，就可能破坏首行盒的生成逻辑，导致缩进“消失”。
常见错误现象：<p><span>这是一段</span>文字</p> 中，<span></span> 加了 display: inline-block，结果整段都不缩进。
实操建议：
- 检查子元素是否意外触发了新的行盒（比如
inline-block、float、vertical-align: top） - 优先用纯文本开头，或确保首个子节点是普通
inline元素（默认行为） - 若必须用内联块，可改用
::first-line伪元素 +margin-left模拟缩进（但注意兼容性：不支持嵌套块级元素）
移动端 Safari / 微信内置浏览器 text-indent 不生效？
iOS Safari（尤其旧版）和微信 WebView 对 text-indent 的解析较保守：当 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 的 font-size 小于 16px，或父容器有 -webkit-text-size-adjust: none，有时会忽略缩进。这不是 bug，而是其文本渲染引擎对小字号排版的主动优化。
实操建议：
- 给
<p></p>显式设置font-size: 16px或更大，再试text-indent - 避免在
<p></p>上同时用transform: scale()或zoom，它们会干扰文本度量 - 微信中可加一行 hack：
text-indent: 2em; margin-left: 0.05em;（极小左外边距能“唤醒”缩进渲染）
用 em 还是 ch 设置中文首行缩进？
em 基于当前字体的 font-size，对中文字体来说，1em ≈ 一个汉字宽度；ch 基于 “0” 字符的宽度，在多数中文字体里也接近一个汉字，但更不稳定——比如思源黑体、苹方里 ch 可能略窄于汉字实际占位。
所以，虽然 text-indent: 2ch 看似语义更准，但实测中 2em 兼容性更好、表现更一致。
实操建议：
- 中文排版统一用
text-indent: 2em，这是最省心的选择 - 如果项目强制要求响应式缩进（如大屏缩进 4em，小屏缩进 1.5em），可用
@media配合em，别碰ch - 慎用
text-indent: -9999px做隐藏文字——它和首行缩进目的不同，别混用
真正容易被忽略的点：缩进值不是越大越好。2em 是中文出版惯例，超过 3em 会让段落失去呼吸感；另外，如果 <p></p> 内含 <img> 或 <iframe></iframe> 这类替换元素，它们的垂直对齐方式（vertical-align）会悄悄拉高首行盒基线，让缩进看起来“偏上”或“错位”。这时候得配合 line-height 或 font-size: 0（对父容器）临时修正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
