text-indent支持百分比单位但不推荐用于中文段落，因其按元素宽度而非字体宽度计算，窄屏下缩进急剧缩水；应优先使用2em等字体相关单位。
text-indent 支持百分比单位，但几乎不推荐在中文段落中使用——它不是按字体宽度算的，而是按元素自身宽度计算，缩进值会随容器变窄而急剧缩水，导致窄屏下“空两格”变成“空半格”甚至完全看不见。
text-indent: 5% 为什么在手机上缩进消失了
百分比单位的计算基准是当前块级元素的 width，不是字体大小。比如一个 <p> 在桌面端宽 600px，text-indent: 5% 就是 30px；到了手机上容器宽只剩 320px，缩进立刻缩到 16px，再小点可能只剩 8px，视觉上根本无法识别为“首行缩进”。
- 中文字体下，一个汉字宽度通常在 14–18px（取决于字号和字体），
5%很难稳定对应“两字宽” - 响应式布局中，
width变化频繁，text-indent值随之漂移，破坏排版节奏 - 表格单元格（
<td>）里更危险：默认width可能由内容撑开，5%可能趋近于 0
哪些场景下百分比缩进反而有用
极少数可控环境里，% 单位能派上用场，但必须满足两个前提：容器宽度固定 + 字号固定。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 固定宽度卡片内展示说明文字：
.card p { width: 300px; text-indent: 3%; }（300×3%=9px，刚好微调对齐） - 生成 PDF 的预处理样式（如 Puppeteer 渲染前注入），已知页面尺寸且禁用缩放
- 配合
vw或媒体查询做粗略响应式补偿，例如：@media (max-width: 480px) { p { text-indent: 8%; } }，但需实测验证
text-indent: 2em 和 text-indent: 5% 的 computed 值差异
打开开发者工具，看 Computed 面板里的最终值：
立即学习“前端免费学习笔记（深入）”；
-
text-indent: 2em→ 计算结果是32px（当font-size: 16px时），放大系统字体后自动变成48px -
text-indent: 5%→ 计算结果是16px（当width: 320px时），系统字体放大不影响该值，但用户缩放后容器宽度可能重算，值也会变 - 关键区别：前者锚定字体，后者锚定布局——中文排版需要的是前者
真正难的不是写 text-indent: 5%，而是你得时刻盯着容器宽度变化，并在每次 layout shift 后重新校验缩进是否仍可辨识。日常开发中，宁可用 2em 加一层 @supports (text-indent: 2ch) 回退，也别押注百分比。
