在网页排版里，悬挂缩进指的是段落第一行向左突出，而后续行正常缩进对齐。借助CSS的text-indent属性设成负值，就能让首行脱离左边界，实现类似书籍中章节号悬挂的效果。这种方式比用浮动或定位更轻量，也更容易维护。
一、text-indent负值的基本原理
text-indent用来指定块级元素中第一行文本的缩进距离。当值为正数时，首行向右缩进；当值为负数时，首行会向左移动，甚至超出元素的content区域。如果父容器没有足够的padding-left，负缩进的内容就会覆盖到元素边框之外，或者触发横向滚动条。
因此实现悬挂缩进的关键，是让元素自身左内边距等于（或大于）首行向左探出的距离。这样首行负缩进后，恰好落在padding区域中，视觉上像是悬挂在左外侧，而其余行仍从content起点开始排列。理解这一点，才能避免布局错乱。
1.1 计算关系
假设我们希望首行向左探出40px，那么可以设置padding-left:40px，同时text-indent:-40px。此时第一行文本起点相当于元素左边缘再往左40px，但由于padding的存在，它实际位于padding box内部左侧，不会溢出。后续行受text-indent影响仅第一行，所以保持原有左对齐。
如果padding-left小于负text-indent的绝对值，首行就会溢出容器。比如padding-left:20px而text-indent:-40px，首行会向左越界20px。这在移动端窄屏上常造成横向滚动，需要格外留意。
二、基础实现代码
下面是一个最简示例，展示如何用负text-indent完成悬挂缩进。我们将一个引用段落的首行作者名向左探出，其余正文缩进。
<style>
.hang {
padding-left: 2em;
text-indent: -2em;
line-height: 1.8;
}
</style>
<p class="hang">鲁迅：其实地上本没有路，走的人多了，也便成了路。这只是万千句子中的一句，用来展示首行悬挂后，后续文字如何整齐排列在内容区。</p>
上述代码中，2em是一个相对单位，能随字体大小自适应。padding-left和text-indent使用相同数值，保证首行恰好探出到padding区域。若换成固定像素，也要注意两者绝对值一致。
该写法的优点是语义清晰，无需额外标签。缺点是若元素本身已有左padding（例如卡片容器），需要改用margin或调整嵌套结构，否则数值会叠加。
三、在列表中的应用
有序列表常需要序号悬挂。默认<ol>的list-style-position:outside虽能实现类似效果，但在多行文本换行时，后续行会回到左边缘而非缩进。用负text-indent可精确控制。
ul.hang-list {
list-style: none;
padding-left: 1.5em;
}
ul.hang-list li {
text-indent: -1.5em;
margin-bottom: 0.5em;
}
这里去掉了默认圆点，用padding-left腾出空间，li的负text-indent把自定义标记或文字序号拉到左方。相比list-style-position，它不受浏览器默认样式干扰，也方便用伪元素添加自定义符号。
需要注意的是，若li内还有块级子元素，text-indent会继承到其内部首行，可能造成意外缩进。此时可对子元素重置text-indent:0。
四、常见误区与排查
不少初学者直接对body或外层容器设负text-indent，却忘了加padding，结果整段文字向左溢出被裁切。另有一种误区是认为text-indent对所有行生效，实际上它仅作用于块级元素的第一行格式化行。
记住：text-indent只缩进首行，且负值必须配合左内边距或外边距预留空间。
还有人把white-space:nowrap和负text-indent混用，导致首行无法换行而横向撑破布局。遇到此类问题，先检查盒模型各方向padding，再用浏览器审查工具看首行是否落在padding box内。
五、与其他方案的对比
除了负text-indent，也可以用flex布局把标记单独放一个盒子。但flex会增加DOM层级，且对纯文本段落不够直观。下表简单比较两者：
| 方案 | 结构复杂度 | 自适应能力 | 适用场景 |
|---|---|---|---|
| 负text-indent | 低，无需额外标签 | 强，用em随字号缩放 | 段落、引用、简单列表 |
| flex布局 | 高，需包裹元素 | 中，需设宽度 | 复杂图文混排 |
从表中可见，单纯文字悬挂缩进优先选负text-indent。当标记需要图标且和文字基线严格对齐时，再考虑flex或grid。
总体来看，掌握padding与text-indent的绝对值配对，就能稳定实现各类悬挂缩进。建议在项目中封装一个工具类，统一使用em单位，减少后期维护成本。
CSStext_indent悬挂缩进修改时间：2026-08-11 02:00:28