HTML段落缩进的变量化设置技巧-html教程-PHP中文网

text-indent 应使用 em 单位，因 1em ≈ 一个汉字宽度，2em 精准实现中文首行两字符缩进；rem 易受根字体影响失准，px 则缺乏响应性。

html段落缩进的变量化设置技巧

text-indent 用 em 还是 rem？单位选型直接决定缩进稳定性

中文段落首行缩进“两字符”不是固定像素值，而是视觉等宽需求。text-indent: 2em 是最稳妥的选择，因为 em 基于当前元素的 font-size，1em ≈ 一个汉字宽度，2em 就自然对应两个字。若用 px（如 text-indent: 32px），在用户调整字号、开启系统放大或使用不同设备时极易失准。

不建议直接用 rem：它基于根元素 html 的字体大小，而段落可能嵌套在 font-size 被重设的容器中（比如侧边栏缩小字体），此时 rem 会脱离上下文，缩进看起来“太小”或“太大”。

text-indent: 2em —— 推荐，语义匹配、响应自然
text-indent: 1.5em —— 小屏（
避免 text-indent: 32px 或 text-indent: 20pt —— 固定单位在缩放/高DPI下表现不可控

如何让部分段落不缩进？class 控制比内联 style 更可靠

新闻摘要、引言、标题后首段、列表项内文本常需取消首行缩进。硬编码 style="text-indent: 0" 看似快，但后期改主题、换字体、加暗色模式时极难批量维护。

正确做法是定义语义化 class：.no-indent 或 .lead，并在 CSS 中统一覆盖：

.p { text-indent: 2em; }
.no-indent { text-indent: 0 !important; }
.lead { text-indent: 0; font-weight: 600; }

注意两点：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

不要漏掉 !important —— 如果已有全局 p { text-indent: 2em }，普通 class 优先级不够
避免用 :first-child 或 :nth-of-type(1) 自动取消首段缩进 —— 富文本编辑器导出的 HTML 常含注释、空 <div> 或 <code>，导致选择器失效
text-indent 失效？这几个隐藏条件必须检查

text-indent 看似简单，但一加就无效是高频问题。根本原因往往不在属性本身，而在元素渲染模式或继承干扰：
- 元素设置了 display: inline 或 display: inline-block —— text-indent 只对块级容器生效，必须确保是 display: block（p 默认就是）
- 父容器用了 text-align: justify 且子元素含 white-space: nowrap —— 排版引擎可能跳过首行计算
- CSS 中存在 * { text-indent: 0 } 这类通配符重置 —— 它会覆盖所有段落，连 !important 都救不回来（权重低于通配符）
- 富文本编辑器插入了 style="text-indent: 0px" 内联样式 —— 浏览器按层叠顺序应用，内联样式优先级高于外部 class，得用更具体的选择器（如 p.no-indent）或 !important 强制覆盖
多级缩进场景别硬套 text-indent

树形菜单、带层级的文档大纲、嵌套引用，需要每级缩进递增（如第1级 2em、第2级 4em、第3级 6em）。这时 text-indent 不再适用——它只缩进首行，且无法按 DOM 深度自动计算。

应改用 padding-left + 语义结构：
```
.outline-item { padding-left: calc(2em * var(--level, 1)); }
/* 使用 data-level="2" 控制 */
<div class="outline-item" data-level="2">二级条目</div>
```
或者更稳妥地用 CSS 自定义属性配合 :is()：
```
ol.tree > li { --level: 1; }
ol.tree > li > ol > li { --level: 2; }
ol.tree li { padding-left: calc(var(--level) * 2em); }
```
真正麻烦的是混合输出：CMS 同时吐出带 text-indent 的 p 和用 margin-left 实现的引用块。它们缩进逻辑互不感知，视觉上错位几像素却查不出原因——这种场景必须提前约定“缩进归 CSS，结构归语义”，禁止在 HTML 层混用多种缩进机制。