悬挂缩进是首行顶左、其余行统一缩进的排版行为，与text-indent（仅推首行）方向相反；需用负text-indent拉回首行+正padding-left推整体内容实现，缺一不可。
什么是悬挂缩进，它和text-indent有什么区别
悬挂缩进（hanging indent）不是“第二行开始对齐缩进”的错觉描述，而是明确的排版行为：首行顶到左边界，其余所有行统一向内缩进。它和 text-indent 的作用方向相反——text-indent 默认推首行，悬挂缩进是把首行“拉回来”，其他行才真正缩进。
浏览器原生不支持 text-indent: hanging 这类声明，也没有 hanging-indent CSS 属性。所谓“第二行开始缩进”，必须靠组合控制实现，核心是：负的首行缩进 + 正的左侧整体缩进。
用 text-indent 和 padding-left 实现悬挂效果
最稳定、无需 JS、兼容所有现代浏览器的做法是：
-
text-indent设为负值（如-2em），把首行往左“拽”出边距 -
padding-left设为正值（如2em），把整个段落内容框向右“推”，让第二行及后续行落在预期位置 - 两者叠加后，视觉上就是：首行贴左，其余行缩进 2em
示例代码：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
p.hanging {
text-indent: -2em;
padding-left: 2em;
}
注意：padding-left 必须存在，否则负 text-indent 会导致首行文字被裁切或溢出容器左侧。
为什么不能只用 margin-left 或 text-align
这些方式无法达成真正的悬挂缩进效果：
-
margin-left: 2em会让整段（含首行）右移，首行依然在缩进后的位置，不符合“首行顶左”要求 -
text-align: justify不影响缩进逻辑，也不会自动产生悬挂；它只调整行内字间距 - 把
text-indent单独设成负值而无padding-left，首行会向左偏移，但父容器通常没留白，结果就是文字消失或触发水平滚动
表格单元格（td）、Flex 子项等场景下，text-indent 本就容易失效，此时更不能依赖它单独工作——padding-left 是唯一可靠锚点。
容易被忽略的细节和调试建议
实际写的时候，这几个点常导致效果出不来：
- 单位混用：
text-indent: -2rem和padding-left: 2em可能因根字号变化错位，建议统一用em - 父容器
font-size: 0：常见于清除 inline 间隙的 hack，会让2em变成 0px，需在p上重置font-size - 段落开头有空格或换行符：会和负
text-indent叠加，造成首行偏移过头，建议清理 HTML 内容前导空白 - 调试时临时加
background: #ff0到p上，观察文字是否真“贴左”——如果背景框里首行还悬在中间，说明text-indent没生效，先查 Computed 中display是否为block
