HTML中制表符会被折叠为单个空格，需用white-space:pre-wrap保留并折行，或用text-indent等替代实现视觉缩进，因其本质是数据分隔符而非排版工具。
制表符 在 HTML 中根本不会渲染为可见空白
直接写 或在字符串里插入 \t，浏览器解析时会把它和空格、换行一起归入「空白字符序列」，最终被折叠成单个空格。这不是 bug，是 HTML 规范强制要求的行为。想让它“看起来像制表符”，必须绕过解析阶段——要么用实体硬编码，要么用 CSS 控制解析方式。
white-space: pre 和 pre-wrap 是唯一能同时保留制表符与连续空格的方案
这两个值会让浏览器原样保留源码里的所有空白：空格、制表符 \t、换行 \n，一个都不动。
-
pre：保留全部，但不自动换行 → 长文本可能横向溢出容器 -
pre-wrap：保留全部，且允许折行 → 日常最安全的选择 - 别用
pre-line：它会把制表符和连续空格全合并成一个空格，达不到目的 - 注意：设了
pre类值后，<span></span>这类内联元素里的换行也会被保留，可能意外撑高行高
用 实体 + 混搭容易踩坑
有人试过写 以为能模拟“制表+两个空格”，但结果不可控：
-
- 不同浏览器对
-
letter-spacing或word-spacing调整，缺乏灵活性 - 在 Vue/React 的模板中，若通过
v-html或dangerouslySetInnerHTML插入含
真正需要“等宽缩进”时，别依赖制表符
如果目标是让文字像代码一样对齐（比如 JSON 缩进、日志层级），优先用 white-space: pre-wrap + 真实的 \t 字符；如果只是视觉上“看起来缩进了”，用 text-indent、padding-left 或 margin-left 更稳定。
立即学习“前端免费学习笔记（深入）”；
制表符不是排版工具，它是数据分隔符。把它当空格用，等于在语义和表现之间强行架桥——桥不一定塌，但每次过桥都得检查承重。
