text-indent: 2em是推荐方式，但不等于严格两个中文字符宽度；实际缩进为当前font-size的两倍，受字体、渲染引擎影响约为1.7–2.3个汉字宽，em单位可响应式适配字号变化。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进方式，但直接写 style="text-indent: 2em;" 却常不生效——问题不在属性本身，而在新闻段落所处的渲染上下文。
新闻段落为什么加了 text-indent 没反应
不是 CSS 写错了，而是这些常见干扰项在起作用：
-
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/000/000/081/179336525482166.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>被富文本编辑器或 CMS 输出设成了display: inline-block或display: flex—— 浏览器压根不生成“首行盒” - 父容器用了
display: grid或display: flex，且没触发 BFC，导致<p></p>的块级行为被覆盖 - 段落开头嵌了
<img alt="HTML怎么给新闻段落设置缩进" >、<svg></svg>或图标字体（如<i class="icon"></i>）—— 缩进作用于该内联替换元素左侧，视觉上等于没动 - 某处高权重样式写了
p { text-indent: 0 !important }（尤其多见于第三方 UI 库或编辑器导出 HTML） -
white-space: nowrap或white-space: pre禁用了换行，“首行”语义失效
最快验证：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。
text-indent 该用什么单位才靠谱
单位选错，缩进在小屏、高 DPI 或系统字体放大时就“看起来不对”：
立即学习“前端免费学习笔记（深入）”；
-
2em：最稳妥。1em ≈ 当前font-size，缩进随字号等比缩放，中文下视觉接近两字符宽度 -
2ch：语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 远小于一个汉字 -
32px或20px：仅限字体大小绝对固定的静态页；系统缩放、DPI 变化时会失准 -
2%：按父容器宽度计算，和字体无关——窄屏下缩进可能只剩几像素，完全不够 -
2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会意外跳变
别用负值或百分比兼容 IE8；它对 text-indent: -1em 和 text-indent: 5% 支持极不稳定，尤其配合 direction: rtl 时容易错位。
表格里放新闻摘要，text-indent 失效怎么办
新闻列表常用 <table> 展示标题+摘要，但 <code><td> 默认是 <code>display: table-cell，text-indent 常被忽略：
- 内容太短（如“突发：XX地震”）未换行 → 浏览器不生成明确“首行盒”，缩进不可见
-
text-align: center或text-align: right把缩进后的文字又拉回去了 - CSS-in-JS 库或编辑器输出带
text-indent: 0 !important
更可靠的做法：
- 直接给
<td> 加 <code>padding-left: 2em：不依赖行盒，兼容所有表格模式 - 若需保留首行缩进语义（比如导出 PDF），包裹一层
<div>：<code><td><div style="text-indent: 2em;">内容</div></td> - 临时调试时，给
<td> 加 <code>background: #ff0，观察文字是否真的向右偏移；若背景框内文字居左顶边，说明text-indent没触发，该换padding-left移动端新闻页缩进容易被忽略的点
2em 在桌面端看着刚好，但在移动端可能太浅：
- 12px 字体下，
2em = 24px，而小屏宽度有限，这个缩进在视觉上几乎不可辨 - 系统开启“更大字体”辅助功能后，
em会放大，但若父容器用了rem或固定px字号，缩进反而会相对失衡 - 某些新闻站点用
viewport强制缩放（如initial-scale=0.75），导致实际渲染像素缩水，2em缩进被压缩
建议在媒体查询中微调：
@media (max-width: 480px) { p { text-indent: 2.4em; } }，或统一用padding-left避开字体缩放带来的不确定性。真正麻烦的是混合场景：富文本编辑器导出的 HTML 同时含内联样式、<span></span>嵌套和text-indent，这时候缩进逻辑互相覆盖，上线前必须用开发者工具逐层检查 computed styles。 - 12px 字体下，
