最可靠方式是直接为块级段落元素设置text-indent: 2em；它仅对块级元素生效，需避免内联元素、flex/grid子项未显式设block、white-space/pre干扰及父容器rtl方向导致异常。
用 text-indent 实现首行缩进最可靠
直接在 CSS 中给段落设置 text-indent 是唯一稳定、语义正确的方式。别试图用空格、 或 手动缩进，那会破坏可访问性、复制粘贴错乱，且响应式下完全不可控。
实操建议：
-
text-indent值推荐用2em（约两个中文字符宽度），兼容中英文混排；避免用px，否则字号缩放时缩进失效 - 只作用于块级元素（如
p、div），对span或内联元素无效 - 若整段文本需左对齐但仅首行缩进，确认没意外触发
display: inline或被父容器的text-align干扰
HTML 编辑器里怎么加？看它是否支持内联样式或自定义 CSS
多数现代编辑器（如 TinyMCE、CKEditor、或者 VS Code 插件）允许你切换到「源码模式」或「HTML 视图」手动写样式。别依赖可视化按钮——很多编辑器的「缩进」按钮实际调用的是 margin-left 或 padding-left，那是整段左移，不是首行缩进。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 在段落标签里加内联样式：
<p style="text-indent: 2em;">这里是正文…</p> - 如果编辑器支持自定义 CSS 入口（比如「高级样式」或「主题 CSS」），统一写：
p { text-indent: 2em; }，再清除所有段落的style属性，避免内联样式覆盖 - 注意：某些编辑器（如 WordPress 古腾堡）会自动过滤
style属性，此时必须通过主题的style.css或「自定义 CSS」后台添加
为什么 text-indent 有时不生效？常见干扰项
缩进失效通常不是属性写错了，而是被其他规则压制或布局模型限制。
排查要点：
- 检查是否设置了
white-space: pre或pre-wrap—— 这会让首行缩进被空白符吞掉 - 确认父容器没设
direction: rtl（从右向左），否则text-indent会往右缩 - 如果段落是 Flex 或 Grid 子项，
text-indent仍有效，但若同时设了justify-content: flex-start等对齐，容易误判为“没缩进” - 浏览器 DevTools 里看 computed 样式，确认
text-indent的最终值不是0px，且没被!important覆盖
移动端和屏幕阅读器要注意什么
缩进不是装饰，它承担中文排版的语义分段功能。但过度依赖视觉缩进可能忽略无障碍需求。
注意事项：
- 不要用缩进替代
<h2>～<h6>结构——屏幕阅读器靠标题层级导航，不读缩进 - 缩进值别设太大（如
4em），小屏设备上易导致文本溢出或换行异常 - 如果网页支持夜间模式或用户自定义字体，确保
text-indent用em或rem，而非固定像素
真正麻烦的从来不是加一行 text-indent，而是后续维护时忘了它被哪条全局 CSS 覆盖了，或者换了编辑器后源码模式被禁用——留个注释，比临时修复快得多。
