html5中换行符不渲染是因浏览器默认忽略空白字符，解决方法包括：一、用white-space: pre-line等css属性；二、用标签；三、js将n替换为；四、CSS伪元素注入换行；五、服务端预处理。
如果您在html5中显示文本时发现换行符（如回车、n）未被渲染为实际换行，而是被浏览器合并为单个空格，则是因为HTML默认忽略空白字符序列（包括换行和制表符）。以下是实现换行保留的多种有效方法：
一、使用white-space CSS属性
该属性控制元素内空白字符的处理方式，通过设置特定值可强制保留换行与空格。
1、在HTML中为需要保留换行的文本容器添加class，例如：<p class="preserve-line">第一行<br>第二行</p>。
2、在CSS中定义该class：.preserve-line { white-space: pre-line; }。
立即学习“前端免费学习笔记（深入）”；
3、若需同时保留换行、空格及不自动换行，改用white-space: pre;；若允许长单词断行但保留换行，使用white-space: pre-wrap;。
二、使用pre标签包裹文本
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></code>标签是HTML原生语义化元素，浏览器默认对其内容应用<code>white-space: pre;</code>，天然保留所有空白符与换行。</p> <p>1、将原始含换行的纯文本直接放入<code><pre class="brush:php;toolbar:false;"></code>标签内，例如：<code><pre class="brush:php;toolbar:false;">姓名：张三n年龄：28n城市：北京</pre>
</div>。
2、如需控制字体样式，可配合CSS设置font-family为等宽字体（如monospace），并重置margin和padding以匹配页面布局。
3、注意<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre>
</div>会保留全部缩进空格，若源文本含多余空格，需预先清理或用white-space: pre-line;替代。
三、将换行符替换为br标签
通过javaScript动态将字符串中的换行符（n或rn）转换为HTML换行标签<br>，适用于从后端或用户输入获取的动态文本。
1、获取原始文本字符串，例如：let text = "第一行n第二行n第三行";。
2、使用正则表达式全局替换：text = text.replace(/rn|r|n/g, "<br>");。
3、将处理后的字符串插入dom，例如：document.getElementById("content").innerHTML = text;。
4、注意：必须使用innerHTML而非textContent，否则<br>会被转义为纯文本。
四、使用CSS content属性配合伪元素（适用于静态固定文本）
当换行位置确定且无需动态更新时，可将多行内容拆分为多个<span></span>，再用::after伪元素注入换行控制，避免修改HTML结构。
1、为每行文本设置独立<span></span>，例如：
。
2、为容器设置display: block;，并为除首行外的<span></span>添加::before伪元素：.multi-line span:not(:first-child)::before { content: "a"; white-space: pre; }。
3、此方法依赖CSS生成换行符a，仅在支持CSS2.1的现代浏览器中可靠生效。
五、服务端预处理换行（适用于模板渲染场景）
在HTML模板（如EJS、thymeleaf、Jinja2）输出前，由服务端将换行符统一转换为<br>或包装<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre>
</div>，确保客户端无需额外JS逻辑。
1、在node.js中使用str.replace(/n/g, "<br>")处理待渲染字符串。
2、在Java spring Thymeleaf中，使用th:utext="${#strings.replace(text, 'n', '<br>')}"输出非转义HTML。
3、务必确保输入内容已做过xss过滤，避免<br>注入恶意标签。