悬挂缩进指段落首行顶格、其余行缩进的排版格式，CSS无原生text-indent: hang属性，需用text-indent负值（如-2em）配合padding-left正值（如2em）模拟实现，且仅对块级元素有效。
什么是悬挂缩进，CSS里没有text-indent: hang
HTML本身不支持“悬挂缩进”这种排版术语——它其实是印刷排版概念，指段落首行顶格、其余行缩进。CSS里没有text-indent: hang这类原生属性，必须用组合样式模拟。常见误解是以为text-indent负值加padding-left就能搞定，结果往往首行错位或换行后缩进失效。
用text-indent负值 + padding-left实现可靠悬挂缩进
这是最通用、兼容性最好的方案，核心逻辑是：让文字整体左移（靠text-indent负值），再用padding-left把容器内容区撑开，使首行“被拉回”左侧，其余行因换行保留左移效果。
实操建议：
-
text-indent设为负值，如-2em，数值需与期望的“悬挂距离”一致 -
padding-left设为正值，如2em，必须与text-indent绝对值相同 - 必须设置
box-sizing: border-box（尤其在有边框/内边距的父容器中），否则padding会扩大总宽度 - 避免在
display: inline或inline-block元素上使用，只作用于块级元素（如p、div）
示例：
立即学习“前端免费学习笔记（深入）”；
p.hanging {
text-indent: -2em;
padding-left: 2em;
box-sizing: border-box;
}
遇到列表项（li）或flex容器时缩进失效怎么办
当p嵌套在li、flex或grid容器中时，text-indent可能被父级的对齐方式覆盖，或因min-width: auto导致换行行为异常。
排查和修复要点：
- 检查父元素是否设置了
text-align: justify或text-align-last: justify，它们会干扰text-indent的渲染位置 - 若父容器是
display: flex，确保子p没被设为flex-shrink: 0，否则可能强制单行不换行 - 在
li中使用时，先重置list-style-position: outside（默认值），避免项目符号影响左边界计算 - 必要时加
white-space: normal防止nowrap类样式干扰换行
用::first-line伪元素做不了真正悬挂缩进
有人尝试用p::first-line { text-indent: 0 }配合全局text-indent，这看似聪明，但::first-line只作用于视觉首行，无法控制后续换行的起始位置——一旦段落换行超过两行，第二行及以后仍会继承text-indent，造成全部缩进，而非“仅首行顶格”。
所以这个方案本质是错的，不是兼容性问题，而是语义错误：悬挂缩进依赖的是“首行不缩进 + 其余行缩进”的相对关系，而::first-line无法定义“其余行”的行为。
复杂点在于：不同字体、不同字号下，em单位的实际像素值会浮动；如果要求精确到像素级对齐（比如对接印刷稿），得用ch或固定px并配合line-height微调。这点容易被忽略，但上线后在高DPI屏或缩放页面时立刻暴露。
