浏览器默认折叠空白符，实现多行连续空格有三法：①用<pre>标签原样保留；②用CSS white-space属性（如pre-wrap）控制；③手动插入 （仅适用于小范围对齐）。

浏览器默认会把连续空格、制表符、换行符全部“折叠”成一个空格，所以直接敲空格或回车没用。要让多行文本显示连续空格，核心就三条路：  逐个硬塞、<pre> 整段托管、CSS 的 white-space 属性接管渲染逻辑。

用 <pre> 标签保留原始格式

这是最直白的方案，适合代码块、ASCII 图、诗歌等需要像素级对齐的场景。<pre> 会原样保留所有空格、缩进和换行，连 Tab 都不放过。

注意两点：

• <pre> 默认用等宽字体（如 monospace），如果想改字体，得加 CSS，比如 font-family: "Segoe UI", sans-serif;
• 它不会自动换行，长行会撑破容器；若需折行，应配合 white-space: pre-wrap

示例：

立即学习“前端免费学习笔记（深入）”；

<pre>
  这里有两个前导空格
    这里有四个前导空格
</pre>

用 white-space CSS 属性控制空白行为

比 <pre> 更灵活，不强制等宽字体，也更容易嵌入普通段落中。关键取值有三个：

• white-space: pre：保留空格和换行，但不自动折行（类似原生 <pre>）
• white-space: pre-wrap：保留空格和换行，且允许自动折行（推荐用于用户输入、日志等）
• white-space: pre-line：合并连续空格，但保留手动换行（<br> 或源码换行）

用法示例：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<p style="white-space: pre-wrap">
  第一行开头有两个空格
    第二行开头有四个空格
</p>

用   手动插入不可断空格

适合小范围补空，比如“姓名：   张三”这种对齐需求。但别指望靠堆   做多行缩进——它不认换行，所有   都挤在一行里。

常见误区：

• 写成  （多了个 &）→ 浏览器当纯文本显示，不解析
• 在属性值里用  ，比如 title="a b" → 大部分浏览器仍会折叠，不可靠
• 混用   和普通空格，比如 a  b → 中间还是只显示一个空隙

正确写法：

<p>字段名：<code>   </code>值</p>

别踩这些坑

全角空格（中文输入法下的空格）虽能绕过折叠，但语义混乱、复制粘贴易出错、字体宽度不稳定，不建议用于正式项目。

letter-spacing 和 word-spacing 看似能“加空”，但它们是按字符/词粒度拉伸间距，不是插入真实空白字符，无法还原原始缩进结构，也不响应换行。

最易被忽略的一点：哪怕用了 white-space: pre-wrap，如果父容器设置了 overflow: hidden 或固定宽高且未设 word-break，长空格行依然会被截断或溢出——空格是内容，不是装饰，得当真内容来布局。