text-indent仅缩进首行，多行缩进应使用padding-left；悬挂缩进用text-indent:-2em配合padding-left:2em实现；flex容器中需显式设display:block或直接用padding-left。
text-indent 只缩进首行，多行缩进要用 padding-left
如果你给 p 设置了 text-indent: 2em 却发现第二行、第三行没缩进，不是代码写错了，是 text-indent 本来就不干这事——它只动第一行。多行缩进属于“整段左移”，得用盒模型控制。
最直接可靠的方案是：padding-left。它对任何 display 类型都生效（block、inline-block、甚至 flex 容器里的子项），且不依赖是否换行、是否生成首行盒。
-
padding-left: 2em：推荐，语义清晰，随字体大小缩放，兼容中文排版习惯 -
padding-left: 2ch：更贴近“两个汉字宽度”的物理意义，但需确认字体支持ch单位（现代主流字体基本支持） - 避免用
margin-left：它移动的是整个元素框，可能破坏与其他兄弟元素的间距逻辑 - 若段落用了
text-align: justify，加padding-left后要检查两端对齐是否被挤坏；必要时配合box-sizing: border-box
表格单元格（td/th）里 text-indent 失效怎么办
td 和 th 默认是 display: table-cell，虽然算块级盒，但 text-indent 在短文本、单行、居中对齐等场景下极易失效——不是 bug，是规范行为：浏览器可能不生成可缩进的“首行盒”。
别硬调 text-indent，直接上 padding-left：
- 给
td或th直接加padding-left: 2em，一劳永逸 - 如果必须保留
text-indent语义（比如导出 PDF 要匹配印刷样式），就套一层div：内容 - 调试时临时加
background: #ff0到td，看文字是否真偏移——若背景框内文字顶左，说明text-indent没触发，该换方案
需要悬挂缩进（首行不缩进，其余行缩进）怎么写
悬挂缩进常见于参考文献、术语解释、带图标列表项。CSS 没有原生“悬挂缩进”属性，但可以用负 text-indent + 正 padding-left 组合实现：
例如让首行左对齐、其余行缩进 2em：
code
p.hanging {
text-indent: -2em;
padding-left: 2em;
}
原理：先整体左移 2em（text-indent: -2em），再把整个内容块右推 2em（padding-left: 2em），结果就是首行回到原位，其余行保持缩进。
- 必须确保
p是块级元素（display: block），且没有被 flex/grid 父容器干扰盒模型 - 若内容含内联元素（如图标、
span），它们也会被一起悬挂，需额外用position: relative微调 - 打印或 PDF 导出时，部分工具对负
text-indent支持不稳定，建议优先测试padding-left替代方案
为什么在 flex 容器里给 p 加 text-indent 没反应
因为 flex 子项默认 align-self: auto，且若未设 width 或 min-width，它可能退化为“内联行为”，导致浏览器不生成首行盒——text-indent 失效。
检查开发者工具中的 Computed 样式，确认 p 的 display 真是 block，而不是被 flex 上下文覆盖成了 inline-flex 或其他。
- 修复方法：显式设置
p { display: block; width: 100%; } - 更稳妥做法：放弃
text-indent，改用padding-left——它不关心父容器是 flex 还是 grid - 若用 CSS-in-JS（如 Emotion）或富文本编辑器输出 HTML，留意是否有高权重的
text-indent: 0 !important覆盖了你的规则
真正容易被忽略的点是：缩进单位的选择会直接影响跨设备一致性。用 2em 在系统字体放大时仍可读，用 32px 在高 DPI 屏上可能过小，用 2% 在窄列里会缩到看不见。别只盯着“能不能缩”，先想清楚“缩多少才稳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
