text-indent 是首行缩进的唯一正确解法，语义准确、兼容稳定、响应式友好；white-space: pre-wrap 适用于保留源码格式的多空格文本； 仅用于真正预格式化场景，需重置样式并转义html。
text-indent 是首行缩进的唯一正确解法
想让段落第一行“空两格”，text-indent 是唯一语义正确、浏览器兼容稳定、响应式友好的方案。它不依赖空格字符，不污染 HTML 内容，复制文本时也不会带多余空白。
常见错误是用 堆叠或在 <p></p> 开头手动敲空格——这些空格会被浏览器压缩，且在字体放大、窄屏、富文本编辑器输出等场景下极易错位。
-
text-indent: 2em最稳妥：1em ≈ 当前字体大小，缩进随字号缩放，中文下视觉接近两字宽 - 别用
px（如32px）：系统缩放后缩进僵硬，小屏下可能过小 - 避免
rem：若项目动态改根字体大小（如夜间模式），缩进会意外跳变 - 确保
p是块级元素：若被设为display: inline或父容器是flex/grid，text-indent会失效
white-space: pre-wrap 适合保留内容内原样空格
如果你的段落里本身就含有多空格、缩进、换行（比如从日志、AI 输出、代码注释中直接粘贴的文本），那需要的是“保留源码格式”，不是“模拟缩进”。这时 white-space: pre-wrap 是首选。
它作用于容器本身，允许你把任意标签（<p></p>、<div>）变成可保留空白的渲染区，同时支持自动折行——不像 <code><pre class="brush:php;toolbar:false;"></pre> 那样容易溢出或强制等宽字体。
-
white-space: pre：保留空格和换行，但不折行，超长内容会横向滚动 -
white-space: pre-line：只保留换行，合并连续空格，适合诗歌类纯换行需求 - 对
<span></span>等内联元素无效，必须套在块级容器上 - 别和
text-indent混用：比如给一个已设text-indent: 2em的<p></p>又加white-space: pre-wrap，可能导致首行缩进叠加、复制时多出不可见字符
标签只用于真正需要“原样输出”的场景
<pre class="brush:php;toolbar:false;"></pre> 是最暴力也最可靠的空格保留手段，但它有强语义约束：它表示“预格式化文本”，浏览器会照搬所有空格、制表符、换行，连 HTML 标签都会当普通字符显示（所以里面要写 <code> 而不是 <code>）。
它默认用等宽字体、自带上下 margin，不适合混入常规段落流。真要用，记得重置：
- 加
style="margin: 0; font-family: system-ui, sans-serif;"去掉外边距和等宽限制 - 别在
<pre class="brush:php;toolbar:false;"></pre>里再塞text-indent或white-space，属性冲突会导致行为不可控 - 若内容来自用户输入，务必先 HTML 转义（如
→ <code><），否则有 XSS 风险
哪些地方最容易踩坑
真正难的不是写对那一行样式，而是它在不同上下文里是否还生效。
- 表格单元格（
<td>）里 <code>text-indent常失效：因为display: table-cell不生成标准行盒，直接改用padding-left: 2em - Flex/Grid 容器中的
<p></p>：父容器格式化上下文改变，text-indent可能被忽略，优先检查 computed 样式里的display和text-indent实际值 - 首行开头是
<img>或<svg></svg>：缩进作用在替换元素左侧，视觉上等于没动，需用margin-left或包装<span></span>单独控制 - 富文本编辑器输出的 HTML：常带
!important覆盖规则，用开发者工具看 computed 值比猜更准
