text-indent设2em无效主因是未生成“首行盒”：元素非块级（如inline）、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖或white-space限制；推荐用2em单位并用开发者工具验证display和computed值。

直接用 text-indent，值设为 2em，但前提是

是块级元素且没被布局干扰。

为什么加了 text-indent 却没缩进

不是 CSS 写错了，而是浏览器压根没生成可缩进的“首行盒”：

• 被设成 display: inline 或 inline-block —— 它就不是块级容器，“首行”概念不成立
• 父容器用了 display: flex 或 display: grid，且没触发 BFC，
  的块级行为被覆盖
• 段落开头是 、 这类内联替换元素，缩进发生在该元素左侧，视觉上等于没动
• 某处高权重样式写了 p { text-indent: 0 !important }（富文本编辑器输出常见）
• white-space: nowrap 或 white-space: pre 破坏了换行，“首行”失去意义

最快验证方式：打开开发者工具 → 查看目标

的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。

text-indent 该用什么单位才靠谱

单位选错，缩进就“看起来不对”，尤其在响应式或系统字体放大场景下：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 2em：最稳妥。1em ≈ 当前 font-size，缩进随字号放大/缩小，中文下视觉接近两字符宽度
• 2ch：语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 远小于一个汉字
• 32px 或 20px：仅限字体大小绝对固定的静态页；系统缩放、DPI 变化时会失准
• 2%：按父容器宽度计算，和字体无关——窄屏下缩进可能只剩几像素，完全不够
• 2rem：若项目用 JS 动态改 html { font-size }（如夜间模式），缩进会意外跳变

别用负值或百分比兼容 IE8；它对 text-indent: -1em 和 text-indent: 5% 支持极不稳定，尤其配合 direction: rtl 时容易错位。

表格单元格（）里怎么缩进

text-indent 在 中常失效，因为：

• 默认 display: table-cell，内容单行未换行时，浏览器可能不生成明确的“首行盒”
• text-align: center 或 right 会把缩进后的文字再拉回，看起来没动
• 富文本输出或 CSS-in-JS 库可能带 text-indent: 0 !important

更稳妥的做法：

• 直接给 加 padding-left: 2em：不依赖行盒，兼容所有表格模式
• 若需保留首行缩进语义（比如导出 PDF），包裹一层
  ：

  内容

  Flex/Grid 容器里 text-indent 失效怎么办

  这不是 bug，是格式化上下文的天然限制。强行加 display: block 可能解决部分情况，但更可靠的做法是换思路：

  • 首选 padding-left: 2em：它不依赖“首行”语义，对 flex item / grid item 同样生效，视觉结果几乎一致
  • 若必须保留 text-indent 语义（比如要兼容旧打印样式），给
    显式加 display: block，并确保其 width 不是 auto（flex item 默认 width: auto 可能导致退化）
  • 别在导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方硬套 text-indent——那是间距问题，该用 margin-left 或 padding-left

  真正容易被忽略的是：缩进是否在打印样式表、高对比度模式、系统字体放大后仍保持可读——这些场景下，em 单位的稳定性远超 px 或 %，但前提是整个排版链路没被 transform、scale 或强制重置字体大小的操作破坏。

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