悬挂缩进需text-indent负值配合padding-left正值实现，避免文字重叠；列表项应改用margin-left与text-indent组合；Flex/Grid中text-indent可能失效，推荐用padding-left或width+display:block解决。

text-indent 负值能实现悬挂缩进，但必须配 padding-left

直接写 text-indent: -1.5em 会让首行向左突出，但后续行仍从容器左边缘开始，导致文字重叠或被裁剪。这不是 bug，是 CSS 渲染规则决定的。

正确做法是用 padding-left 把整段内容“托”回来，让视觉上只第一行悬出：

• text-indent 设负值（如 -1.5em），控制首行左移量
• padding-left 设等量正值（如 1.5em），把其余内容右推相同距离
• 两者叠加后，只有首行相对其他行左移，形成标准悬挂效果

悬挂缩进常见于参考文献，但要注意 list-style 的干扰

在 <ol></ol> 或 <ul></ul> 里给 li 加负缩进时，list-style-position: outside（默认）会让项目符号留在原位，而文字左移后可能盖住符号；设成 inside 又会改变整体布局宽度。

更稳妥的做法是绕过 text-indent，改用 margin-left 和 text-indent 组合：

立即学习“前端免费学习笔记（深入）”；

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• li { margin-left: 1.5em; text-indent: -1.5em; }
• 这样项目符号随 margin-left 一起右移，首行再左缩，视觉干净
• 避免对 ol/ul 直接设 text-indent——它不继承，且对列表容器无效

Flex/Grid 容器中 text-indent 失效？别硬扛，换思路

在 display: flex 或 display: grid 的父容器里，子 p 元素若没显式设 width 或 flex: 0 0 auto，text-indent 可能完全不生效——不是浏览器问题，是格式化上下文限制。

此时强行加 display: block 并不够可靠。推荐两种落地解法：

• 用 padding-left: 2em 替代：它不依赖“首行”语义，对任意 display 类型都生效，视觉几乎无差别
• 若必须保留语义（比如打印样式需严格匹配 word 文档），给 p 加 width: 100% + display: block，确保它参与常规流
• 绝对不要在 nav、header 这类非段落语义容器里硬套 text-indent——那是间距问题，该用 margin-left

负缩进遇上 white-space: pre 或

 标签要格外小心

text-indent 在 <pre class="brush:php;toolbar:false;"></pre> 或设置了 white-space: pre 的元素里依然起作用，但容易产生“双缩进”假象：如果源码里首行开头就有空格或制表符，它们会被原样渲染，再叠加 text-indent，结果就是缩进翻倍。

排查方法很简单：

• 临时加 border: 1px solid red 看缩进是否从边框内侧开始
• 删掉首行所有前置空白字符，再测试 text-indent 是否按预期偏移
• 真需要保留原始空格又想要精确控制，改用 padding-left 更可控，它和空白字符互不干扰

负缩进真正难的不是写法，而是判断“这里到底该不该用”。很多场景下你以为在做悬挂缩进，其实只是想调左边距——先分清语义，再选属性，比调参数重要得多。