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