text-indent是专用于块级元素首行缩进的CSS属性，支持正值（如2em右缩进）、负值（实现悬挂缩进），不作用于整段；现代浏览器全支持，但对inline或flex容器无效；推荐用相对单位2em而非px以保障响应式效果。
用 text-indent 控制首行缩进最直接
所有现代浏览器都支持 text-indent，它是专为段落首行缩进设计的 CSS 属性，不会影响其他行。默认值是 0，设成正值（如 2em）就向右缩进，负值则向左“悬挂”。
实操建议：
- 优先用相对单位：
2em（相对于当前字体大小）比32px更健壮，响应式布局下不易错位 - 对
<p></p>全局设置即可：p { text-indent: 2em; } - 注意：
text-indent对display: inline或flex容器无效，只作用于块级或表格单元格等可换行容器
为什么不用 padding-left 或 margin-left
这两个属性会让整段文字（包括第二行、第三行）一起左移，不是“首行缩进”，而是“整体偏移”。尤其在换行多、宽度窄的场景下，视觉上会明显错位，还可能触发意外的水平滚动条。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
常见错误现象：
- 段落右侧文字被截断，但开发者以为是容器宽度问题
- 列表项（
<li>）加了padding-left后，项目符号也跟着移位 - 配合
text-align: justify使用时，两端对齐失效
需要兼容 IE8 及更老浏览器怎么办
IE8 支持 text-indent，但对百分比值（如 4%）解析不稳定；IE7 及以下不支持 em 在 text-indent 中的计算，推荐降级为 px 值并加条件注释（如果真必须支持）。
更实际的做法：
- 确认目标用户是否还在用 IE7/IE6——绝大多数情况已无需考虑
- 若必须兼容，用固定像素：
text-indent: 32px;，并在加<meta http-equiv="X-UA-Compatible" content="IE=Edge">强制最新渲染模式 - 避免混用
text-indent和direction: rtl，老 IE 下行为不可靠
遇到首行缩进失效，先检查这三件事
不是代码写错，而是上下文干扰导致的“看起来没生效”：
- 父容器设置了
overflow: hidden且宽度不足，缩进部分被裁掉（打开开发者工具看盒模型） - 段落里用了
<span style="display: block;"></span>或其他强制换行内联元素，打断了文本流，text-indent失效 - CSS 优先级被覆盖：比如某处写了
p { text-indent: 0; }且规则位置更靠后，用浏览器调试器的“Computed”面板直接查最终值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
