悬挂缩进需用text-indent负值配合padding-left正值，如text-indent: -2em和padding-left: 2em，否则首行会溢出或重叠；必须确保元素为display: block且处于BFC中。
悬挂缩进用 text-indent 负值 + padding-left 防重叠
直接写 text-indent: -2em 会把首行往左拉出空白，但后续行仍顶在左边——文字可能被裁切或重叠。必须配合 padding-left: 2em 把整个内容区右推，让首行“悬”出来的同时，其余行有空间正常显示。
常见错误是只设负 text-indent 不加 padding-left，结果首行文字跑到容器外被截断，或者和左侧图标/边框打架。
-
text-indent: -1.5em和padding-left: 1.5em数值要一致，否则缩进量不对齐 - 若段落内含
<img alt="HTML怎么设置段落悬挂缩进效果" >或<svg></svg>等内联替换元素，它们也会被padding-left推开，需额外用margin-left: -1.5em拉回（仅限该元素） - 中文场景下，
2ch比2em更贴近汉字宽度，但 IE 不支持，稳妥起见仍推荐em
display: block 是硬性前提，Flex/Grid 父容器会干扰
text-indent 只对块级格式化上下文（BFC）生效。<p></p> 默认是 display: block，但如果它被包在 display: flex 或 display: grid 的父容器里，且父容器设置了 align-items: center 之类，text-indent 就可能“计算了但不渲染”。
验证方式：打开开发者工具 → Computed 标签页 → 查看目标 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 的 display 是否为 block，且 text-indent 值不是 0。
立即学习“前端免费学习笔记（深入）”；
- 修复方法一：给段落加
align-self: flex-start（Flex 场景） - 修复方法二：改用
margin-left: -1.5em+padding-left: 1.5em组合，绕过text-indent依赖 - 更干净的方案：把悬挂逻辑提到父容器，比如
.hanging { padding-left: 1.5em; text-indent: -1.5em; }，避免嵌套干扰
表格单元格里别信 text-indent，直接上 padding-left
<td> 和 <code><th> 是 <code>display: table-cell，浏览器对其首行盒生成不一致，尤其内容短、未换行时，text-indent 常计算了但不可见。这不是你代码错，是渲染机制限制。
实测有效做法只有两个：
- 全局写
td, th { padding-left: 1.5em; text-indent: -1.5em; }—— 多数情况能凑效，但导出 PDF 时语义丢失 - 结构层兜底：
<td><div style="padding-left: 1.5em; text-indent: -1.5em;">内容</div></td>，确保 BFC 触发，兼容 wkhtmltopdf 等工具 - 调试时临时加
background: #ff0到<td>，看文字是否真偏移；如果背景框内文字仍贴左，说明 <code>text-indent没触发首段不悬挂、富文本覆盖、Safari OpenType 是高频坑点
中文排版规则要求首段不悬挂，但很多人只写了全局
p { text-indent: -1.5em; padding-left: 1.5em; }，忘了重置第一段。更麻烦的是 CMS 富文本常带text-indent: 0 !important，导致样式被强行清零。Safari（尤其是 iOS/macOS）对 OpenType 特性启用策略不同，某些字体下
text-indent渲染位置会偏移几个像素，肉眼可见错位。- 首段重置必须显式：
p:first-of-type { text-indent: 0; padding-left: 0; } - 对抗富文本覆盖：
p:not(.no-hanging) { text-indent: -1.5em; padding-left: 1.5em; }，再给 CMS 输出的段落加class="no-hanging" - Safari 下若发现悬挂错位，加
font-feature-settings: "halt" 0;关闭悬挂标点特性（注意是0表示关闭）
text-indent和padding-left的最终值，比反复调数字管用得多。 - 首段重置必须显式：
