html默认压缩连续空白字符为一个空格，故“hello\n world”显示为“hello world”；可用标签或css white-space: pre-wrap保留格式，但需注意缩进、转义及兼容性问题。

HTML默认为什么吃掉回车和空格

因为HTML解析器会把连续的空白字符（包括换行、制表符、多个空格）压缩成一个空格，这是规范行为，不是bug。所以直接写

hello\n  world

在页面上依然会显示为“hello world”连在一起，中间只一个空格。

用<pre class="brush:php;toolbar:false;"></pre>标签保留格式但要注意缩进

<pre class="brush:php;toolbar:false;"></pre>是最直接的方式，它会原样渲染换行和空格，但前提是内容本身不能被HTML结构缩进干扰——比如你在代码里这样写：

<pre class="brush:php;toolbar:false;">
  line one
  line two

那实际渲染时，开头两个空格也会被显示出来。常见做法是把<pre class="brush:php;toolbar:false;"></pre>标签内容写在行首，或用JavaScript动态注入字符串避免模板缩进污染。

html-deploy

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

下载

• 适合展示代码块、日志、ASCII图等对空格敏感的内容
• 默认是等宽字体，如需改样式得加CSS：pre { font-family: inherit; white-space: pre-wrap; }
• 如果内容来自用户输入（比如），记得先做HTML转义，否则<code>会被当标签解析</code>

用CSS的white-space属性更灵活控制

不用改HTML结构，只需给任意元素加CSS：

<div style="white-space: pre-wrap;">hello  
world</div>

其中pre-wrap是常用值，它保留换行和空格，同时允许自动换行；pre不换行，pre-line则合并空格但保留换行。

• white-space: pre-wrap：最接近<pre class="brush:php;toolbar:false;"></pre>但支持文本流布局
• 注意IE8+才支持pre-wrap，老项目用pre更稳妥
• 如果父容器有text-align: center，pre-wrap内容不会居中——空白字符也算内容，得靠text-align: left重置

从后端或JS注入时别忘了转义

很多人试了<pre class="brush:php;toolbar:false;"></pre>或white-space还是不行，其实是内容里混了未转义的HTML字符。比如后端返回的字符串含<script></script>，浏览器直接执行了；或者JS拼接时用了innerHTML但没处理&<code>>。

• 服务端输出前必须HTML转义，Python用html.escape()，Node.js用he.escape()
• 前端JS注入推荐用textContent而非innerHTML，它天然防XSS且保留原始空白
• 如果非要用innerHTML，得先转义再替换换行符：str.replace(/\n/g, '<br>')——但这只是模拟换行，空格仍会被压缩

实际中最容易忽略的是模板引擎里的空白处理（比如Jinja2默认trim空白）和富文本编辑器自动过滤空格的行为，这两处不查文档几乎必踩坑。

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