text-indent支持百分比单位但不推荐用于中文段落，因其按元素宽度而非字体宽度计算，窄屏下缩进急剧缩水；应优先使用2em等字体相关单位。

text-indent 支持百分比单位，但几乎不推荐在中文段落中使用——它不是按字体宽度算的，而是按元素自身宽度计算，缩进值会随容器变窄而急剧缩水，导致窄屏下“空两格”变成“空半格”甚至完全看不见。

text-indent: 5% 为什么在手机上缩进消失了

百分比单位的计算基准是当前块级元素的 width，不是字体大小。比如一个 <p></p> 在桌面端宽 600px，text-indent: 5% 就是 30px；到了手机上容器宽只剩 320px，缩进立刻缩到 16px，再小点可能只剩 8px，视觉上根本无法识别为“首行缩进”。

• 中文字体下，一个汉字宽度通常在 14–18px（取决于字号和字体），5% 很难稳定对应“两字宽”
• 响应式布局中，width 变化频繁，text-indent 值随之漂移，破坏排版节奏
• 表格单元格（<td>）里更危险：默认 <code>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) 回退，也别押注百分比。

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