JS设置段落文本时换行符(\n)无效，如何实现HTML换行效果？

有两种常用方法可以实现你要的换行效果：

方法一：替换换行符为<br>标签，使用innerHTML设置 #

把字符串里的\n全局替换成HTML的<br>标签，然后用innerHTML而非textContent赋值，浏览器会解析HTML标签实现换行：

const textContent = "Lorem ipsum dolor sit amet,\n" + 
                    "consetetur sadipscing elitr,\n" + 
                    "sed diam nonumy \n eirmod tempor...";
document.getElementById("text").innerHTML = textContent.replace(/\n/g, '<br>');

对应的HTML保持不变：

<p id="text"></p>

方法二：用CSS让段落识别换行符 #

不需要修改JS代码，给目标段落添加white-space: pre-line样式，浏览器会自动把字符串里的\n解析成换行，同时还能合并多余的空格：

#text {
  white-space: pre-line;
}

JS代码沿用你原本的写法即可：

document.getElementById("text").textContent = 
"Lorem ipsum dolor sit amet,\n" + 
"consetetur sadipscing elitr,\n" + 
"sed diam nonumy \n eirmod tempor...";

两种方法的区别：

• 方法一直接生成HTML标签，适合需要精确控制换行位置，或还要插入其他HTML元素的场景；
• 方法二用CSS控制渲染，更符合内容与样式分离的原则，适合纯文本的换行需求。

内容的提问来源于stack exchange，提问作者philale