text-indent 在 中需满足 display: table-cell 且 white-space 不为 nowrap 才可见；常因 vertical-align: middle 拉平或 nowrap 撑满而失效，推荐优先用 padding-left 保证兼容性与稳定性。

text-indent 在 <td> 里能用，但不是写上就生效——它对 display、white-space、padding 的敏感度远超普通段落。 <h3>为什么 <code><td> 加了 <code>text-indent 看不出缩进

最常被忽略的是视觉“吃掉”缩进：单元格默认 vertical-align: middle，首行文字缩进后，若行高不够或字体渲染有锯齿，像素级偏移会被垂直居中拉平；更隐蔽的是框架注入的 white-space: nowrap（如 Ant Design 默认给 <td> 加这个），导致整段压成一行，缩进区域被右侧内容撑满，看上去毫无变化。 <p>调试建议：<code>background: #ff0 + border: 1px solid red 临时加到 <td> 上，观察文字是否真的向右偏移；若背景框内文字仍顶左，说明 <code>text-indent 没触发，该换 padding-left。

• computed display 必须是 table-cell（浏览器默认值），若被 JS 或 CSS-in-JS 覆盖为 inline 或 flex，text-indent 彻底失效
• white-space: nowrap 不阻止缩进计算，但会让缩进“不可见”——需配合 max-width 或 overflow: hidden 观察效果
• text-align: center 或 right 会叠加缩进：比如 text-align: center + text-indent: 2em，首行先居中再右移 2em，结果可能跑出视区

text-indent 和 padding-left 在 <td> 里怎么选 <p>本质区别在于作用对象：<code>text-indent 只推第一行，后续行左对齐；padding-left 是整块内容右移，所有行同步偏移。表格排版中，前者适合模拟中文段落规范（如带标题的明细行），后者更适合 UI 对齐（如图标+文字的统一左边界）。

但要注意：<td> 设了 <code>padding-left: 1em 再加 text-indent: 2em，第一行会从 padding 后的位置再缩进 2em，形成“双重偏移”——这在带边框的缩进列表中可能是故意为之，但多数情况属于误操作。

• 打印或 PDF 导出（如 wkhtmltopdf）对 table-cell 的 text-indent 支持不稳定，实测 padding-left 更可靠
• 若单元格内容是单行短文本（如 “是”、“123”），text-indent 虽生效，但缩进像素易被内容宽度吞没，padding-left 视觉反馈更直接
• 无障碍支持无差别，两者都可被屏幕阅读器正确朗读

嵌套 <p></p> 在 <td> 里时的缩进叠加风险 <p><code><td style="text-indent: 2em"><p>文本</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></td> 可能缩进 4em：父 <td> 的缩进起点是内容盒左边缘，子 <code><p></p> 的 text-indent 也从自己内容盒左边缘起算，且未重置时会继承叠加。这不是 bug，是盒模型行为的自然结果。

• 显式重置子元素：<p style="text-indent: 0">文本</p>
• 避免嵌套块级元素：直接在 <td> 上设 <code>text-indent，内容用纯文本或 <span></span>（需配 display: inline-block 才生效）
• 若必须嵌套，优先用 padding-left 统一控制左边界，避开叠加逻辑

移动端和系统字体放大时的缩进稳定性

text-indent: 2em 会随当前字号同比缩放，这在系统字体放大（如 iOS 辅助功能）或 viewport 缩放时可能导致缩进过大、撑破窄列。而 padding-left: 2em 同样受此影响，但 padding-left: 16px 这类固定值又会在大字号下显得太小。

• 折中方案：text-indent: 1.6rem，配合根元素统一调控 font-size，比纯 em 更稳定
• 极端场景（如报表导出）：用 ch 单位（text-indent: 2ch），取 “0” 字符宽度，虽不完美匹配汉字，但比 % 或 px 更可控
• 务必测试 PDF 导出工具的实际表现——很多工具会忽略 table-cell 的 text-indent，只认 padding
真正麻烦的不是怎么写 text-indent，而是判断它该不该出现：表格里多数“缩进”本质是列对齐或层级标识，用 padding-left 或结构化 class（如 level-2）更直白、更少副作用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！