text-indent负值需配合等量padding-left实现可靠悬挂缩进，单独使用会导致首行文字重叠或溢出；在inline元素、flex/grid容器、table-cell及nowrap等场景下失效，响应式推荐用em单位。
text-indent负值能实现悬挂缩进，但必须配padding-left防文字重叠
负值text-indent本身只把首行往左拉，后续行不动，结果是首行文字可能压在段落左边框甚至父容器外。这不是bug，是它的设计行为。真正可用的悬挂缩进，一定是text-indent负值 + 等量padding-left组合使用。
常见错误现象：加了text-indent: -1.5em后，首字贴着左边、被截断或和上一段挤在一起。
- 正确写法：
p.hanging { text-indent: -1.5em; padding-left: 1.5em; } - 若用
20px，则padding-left也得是20px，单位必须一致 - 别用
margin-left代替padding-left——它会让整个段落位移，破坏与上下文的对齐
哪些场景下text-indent负值会失效
负值不是万能的，遇到以下情况，它根本不会渲染出“向左缩”的效果：
-
p被设成display: inline或inline-block——浏览器不生成首行盒，text-indent直接忽略 - 父容器是
display: flex或display: grid，且子p没显式设align-self: flex-start等，格式化上下文干扰首行计算 - 段落开头是
<img>或<svg>这类内联替换元素，text-indent作用在该元素左侧，视觉上等于没动 - 用了
white-space: nowrap，整段变成单行，首行概念消失
调试时最直接的办法：打开开发者工具 → 查看目标p的Computed面板 → 确认display是block，且text-indent最终值确实是你设的负数。
立即学习“前端免费学习笔记（深入）”；
表格单元格（td/th）里怎么搞悬挂缩进
text-indent在td和th里基本不可靠，因为它们默认是display: table-cell，不触发标准首行盒。强行加负值，经常没反应，尤其内容短、未换行时。
- 最稳方案：
td.hanging, th.hanging { padding-left: 1.5em; text-indent: -1.5em; }——padding-left确保内容整体右移，text-indent把首行再拉回来 - 如果必须保留语义（比如导出PDF要匹配印刷排版），就套一层
<div>：<td><div style="text-indent: -1.5em; padding-left: 1.5em;">内容</div></td> - 临时加
background: #ff0到td，看文字是否真偏移；如果背景框里文字还紧贴左边缘，说明text-indent没生效，立刻切到padding-left方案
负值缩进在响应式或高DPI设备上要注意什么
用像素值（如-20px）做负缩进，看似简单，但在系统缩放150%、高DPI屏或用户调大浏览器字号时，缩进量会固定不变，导致首字严重溢出或缩进不足。
- 优先用
em：例如text-indent: -1.8em，它随当前字体大小等比缩放，视觉一致性好 - 避免
rem：如果项目动态改过html { font-size }（比如夜间模式切换），负rem会意外跳变 - 别用
%：它是按父容器宽度算的，窄屏下text-indent: -5%可能只有几像素，完全起不到悬挂效果 - 中文字体差异大，1.8em比2em更适配某些字体（如Noto Sans CJK），建议实测微调
真正难的不是写出text-indent: -1.5em，而是确认它在td里、在flex容器里、在打印预览里、在富文本输出的HTML里，都按你预期的方式生效——每个环境都可能悄悄绕过这个属性。动手前先盯住Computed值，比反复改数字管用得多。
