标签不显示空格和换行的根本原因是内容在到达标签前已被模板转义、html解析或js处理导致空白符丢失；必须确保字符串含真实换行符 ，并配合white-space: pre和等宽字体使用。
为什么 <pre class="brush:php;toolbar:false;"></pre> 标签不显示空格和换行？
因为浏览器默认会合并连续空白字符（空格、制表符、换行），即使用了 <pre class="brush:php;toolbar:false;"></pre>，如果文本是动态插入或经过 JS 处理（比如 innerHTML 赋值、模板字符串拼接），换行符可能被转义成普通空格，或者 DOM 解析时被规范化。常见现象：后端返回的带缩进的 JSON 或代码片段，在页面上变成一行。
<pre class="brush:php;toolbar:false;"></pre> 正确用法与必须配合的 CSS
单纯写 <pre class="brush:php;toolbar:false;"> hello
world</pre> 不够——<pre class="brush:php;toolbar:false;"></pre> 默认只保留换行和空格的“语义”，但字体、空白处理仍受 CSS 影响。必须加这两条样式：
pre {
white-space: pre;
font-family: monospace;
}
其中 white-space: pre 是关键，它禁用浏览器对空白符的折叠；font-family: monospace 确保等宽对齐，否则缩进会错位。若用框架（如 React/Vue），注意不要让 JSX/模板编译器把换行吃掉——推荐用 {`text`} 包裹原始字符串，而非拼接多行字符串。
从后端或 API 获取文本时的常见坑
后端返回的字符串里，换行符可能是
（Unix）、
（Windows）甚至
（古早 Mac），而 JS 字符串中
是唯一被识别的换行控制符。如果后端返回的是 JSON 字符串，且换行符被双反斜杠转义（如 "line1\nline2"），JS 解析后得到的是字面量 "line1\nline2"，不是真实换行。
- 检查响应体原始内容：用
console.log(JSON.stringify(text))看是否含\n—— 如果有，需用text.replace(/\n/g, ' ')恢复 - 服务端输出 JSON 时，确保换行符未被双重转义；Node.js 的
JSON.stringify(obj, null, 2)生成的缩进是安全的 - 避免在 HTML 模板里手写多行
<pre class="brush:php;toolbar:false;"></pre>内容：换行会被 HTML 解析器归一化，应通过 JS 动态注入
替代方案：当 <pre class="brush:php;toolbar:false;"></pre> 不够用时
如果要高亮语法、支持滚动、或兼容富文本编辑器粘贴（含混合空格/全角空格/零宽空格），<pre class="brush:php;toolbar:false;"></pre> 就力不从心了。这时可考虑：
- 用
<code>+white-space: pre-wrap：允许换行但自动折行，适合长行文本 - 对特殊空格做显式替换：比如把多个空格替换成
- 用
<textarea readonly></textarea>：原生保留所有格式，样式可控，但语义不符，SEO 和无障碍不友好
真正难的不是加个标签，而是从数据源头到 DOM 渲染全程守住换行和空格的“真实性”——中间任何一环（编码、传输、解析、渲染）出问题，<pre class="brush:php;toolbar:false;"></pre> 都救不回来。
