HTML段落缩进在中英文混排中的设置技巧-html教程-PHP中文网

text-indent: 2em缩进“看起来不对”是因为中英文字符宽度不一致：中文近似正方形（如16px字体下宽≈16px），英文字符仅6–10px宽，而2em按font-size统一计算（如32px），导致英文开头时缩进过大、中文开头时较匹配。

html段落缩进在中英文混排中的设置技巧

text-indent: 2em 在中英文混排里为什么缩进“看起来不对”

不是值写错了，而是中英文字符宽度不一致导致视觉错觉。中文汉字在多数字体下接近正方形（如 16px 字体时宽≈16px），而英文字符（如 “a”、“x”）通常只有 6–10px 宽。text-indent: 2em 是按当前 font-size 计算的绝对距离（比如 16px 字体下 = 32px），它对所有内容一视同仁——所以首行若以英文开头，32px 缩进会显得过大；若以中文开头，又刚好接近两字宽。

常见错误现象：text-indent: 2em 加了，但段落开头是 “HTML is...”，结果首字母离左边界太远，像多缩了一行。

别用 2ch：虽然语义上更贴近“字符数”，但中文字体下 1ch 常远小于一个汉字（尤其在思源黑体、Noto Sans SC 中），且 IE 完全不支持
别依赖 text-align: justify 自动补缩进：它对中文无效，除非同时加 text-justify: inter-character 和 lang="zh"
若段落以英文单词起始，可临时加 span 包裹并设 display: inline-block; width: 2em; 占位，再让后续文本自然流过去（慎用于长文本）

中英文混排时 text-indent 和 letter-spacing 的冲突点

letter-spacing 对西文影响显著，对中文几乎不可见——但它会叠加在 text-indent 的起始位置之后生效。也就是说，缩进量固定，但首字符被拉宽后，视觉上“第一字”的右边缘会外移，造成缩进“变浅”的错觉。

典型场景：某段落设了 letter-spacing: 0.05em + text-indent: 2em，开头是 “JavaScript”，结果 “J” 被撑开，后面字符依次右推，整行实际占用宽度增加，但缩进起点没变，导致首字和左边界间隙变小。

调试建议：打开开发者工具 → 查看该 p 元素的 Computed 值 → 确认 text-indent 是否仍为预期值（常被高权重规则覆盖）
解决方案：混排段落优先用 text-indent: 2em，禁用全局 letter-spacing；如需微调西文可单独给英文部分加 span.lang-en { letter-spacing: 0.03em; }
避免 text-rendering: optimizeLegibility 和 letter-spacing 同时启用：前者已含字距优化逻辑，叠加后者易引发渲染抖动

富文本编辑器输出或 CMS 生成的段落为何缩进失效

很多 CMS（如 WordPress、Notion 导出 HTML）或编辑器（如 TinyMCE、Quill）默认把 p 标签设为 display: inline-block 或套了 div 容器并启用了 flex 布局，导致 text-indent 失效——因为它只对块级格式化上下文中的块级元素生效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

错误现象：样式表写了 p { text-indent: 2em; }，但页面上完全没反应；检查 computed 样式发现 display 是 inline-block 或父容器是 display: flex。

最快验证：在开发者工具中选中段落 → 切到 Computed → 查 display 是否为 block，text-indent 最终值是否非零
兼容方案：对 CMS 输出加兜底规则，例如 p, .ql-editor p { display: block !important; text-indent: 2em; }
若无法改 HTML 结构，可用 padding-left 替代：它不依赖块级盒行为，但注意这是整段缩进，不是“首行”缩进

竖排中文混英文时 text-indent 还管用吗

不管用。writing-mode: vertical-rl 下，text-indent 的方向逻辑会翻转——它缩进的是“首列”顶部，而不是传统意义上的“首行”。更糟的是，若没配 text-orientation: upright，英文会变成纵向堆叠（H↵T↵M↵L），此时 text-indent 作用在 H 上，视觉完全混乱。

正确做法：竖排场景下放弃 text-indent，改用 padding-top 模拟“首行缩进”效果（因竖排时“行”=“列”，“首行”=“顶部”）。

必须设置 text-orientation: upright，否则西文字符无法直立显示
容器需有明确 height，否则竖排内容会无限拉长；配合 overflow: hidden 或 text-overflow: ellipsis 控制截断
竖排时 text-align: center 表示垂直居中，text-align: right 表示顶部对齐——和横排相反，容易误判

真正麻烦的从来不是写一行 text-indent: 2em，而是你不知道它在哪种布局、哪种字体、哪种语言组合下会静默失效。每次加缩进前，先确认 display 类型、字体度量、writing-mode 状态——比反复调数值更省时间。