html中回车默认不换行是因为解析器将连续空白字符（含换行符）压缩为单个空格，这是规范行为而非bug；可通过white-space属性控制，如pre-wrap保留换行且允许自动换行，pre-line合并空格但保留换行，pre则完全保留空白但不自动换行。
HTML中回车为什么默认不换行
因为HTML解析器会把所有连续的空白字符（包括换行、制表符、多个空格）压缩成单个空格，\n本身没有语义，不会触发换行。这不是bug，是规范行为。
用white-space CSS属性控制空白处理
这是最直接可控的方式，关键在选择合适的值：
-
white-space: pre：保留空格和换行，但不自动换行（文本超出容器也不折行） -
white-space: pre-wrap：保留空格和换行，且允许自动换行（推荐用于用户输入内容） -
white-space: pre-line：合并空格，但保留换行（\n转为<br>效果，适合纯文本日志类展示）
示例：
<p style="white-space: pre-wrap">第一行\n第二行\n第三行</p>会按换行显示三行。
用<br>或replace()手动转换换行符
如果后端返回的是带\n的纯文本，前端需主动处理：
- 服务端渲染时，可把
\n替换成<br>（注意XSS风险，需先转义HTML特殊字符） - 客户端JS处理：
text.replace(/\n/g, '<br>')，再用innerHTML插入（同样要确保内容可信） - 更安全的做法：
element.textContent = text; element.innerHTML = element.innerHTML.replace(/(?:\r\n|\r|\n)/g, '<br>');—— 先设文本，再替换换行，避免XSS
为什么不用<pre class="brush:php;toolbar:false;"></pre>标签
<pre class="brush:php;toolbar:false;"></pre>确实保留换行和空格，但它有固定字体（通常是等宽）、无内边距、不继承父级字号/行高，视觉上突兀。除非明确需要代码块样式，否则优先用white-space配合普通标签。
真正容易被忽略的是：不同浏览器对white-space: pre-line中连续空格的合并逻辑略有差异，如果业务强依赖空格数量（比如对齐排版），必须测试Chrome/Firefox/Safari实际渲染效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
