应使用 CSS 的 text-indent 实现段落首行缩进，因其语义正确、兼容性好且不影响文本流；p { text-indent: 2em; } 即可，避免依赖易受 white-space 或 flex 布局干扰的 。
HTML里用 做段落缩进为什么经常失效
直接在段首加多个 看似简单，但实际会受 CSS 的 white-space、text-indent 或父容器排版规则干扰。比如 在 display: flex 容器里可能被压缩，在 white-space: nowrap 下又意外撑宽整行。它本质是字符，不是样式控制手段，所以不推荐作为缩进主力。
真正可靠的段落首行缩进：用 CSS 的 text-indent
这是语义正确、浏览器兼容性好、且不影响文本流的方案。只需给 或其他块级元素设置：
p {
text-indent: 2em;
}
-
2em表示缩进两个当前字体大小的宽度，比固定像素更适应响应式场景 - 只作用于**首行**，后续行自动对齐左边界
- 支持负值（如
-1em）实现悬挂缩进 - 注意：对
display: inline元素无效，必须是块级或 inline-block
什么时候才该用 ？以及怎么用才不踩坑
仅当需要在**行内位置强制保留一个不可折行的空白间隙**时使用，比如中文排版中「第 一 章」中间防断行，或表格单元格内微调对齐。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 连续多个
- 若真要靠它“模拟缩进”，得配合
white-space: pre或pre-wrap，但这会破坏正常换行逻辑 - 在 Vue/React 模板中写
{'\u00a0'}或 CSS 替代
遇到缩进不生效？优先检查这三处
很多“ 不起作用”或 “text-indent 没反应”的问题，其实和空格本身无关：
- 目标元素是否被设了
display: inline——text-indent对它完全无效 - 父容器是否设置了
text-align: justify并且内容太短，导致浏览器忽略首行缩进逻辑 - 是否有更高优先级的 CSS 规则（比如重置库里的
* { text-indent: 0 }）覆盖了你的设置
复杂点在于：缩进看似是小样式，但它横跨 HTML 结构语义、CSS 盒模型、字体度量和浏览器渲染细节。别从 开始试，先确认元素类型和样式层叠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
