如何让HTML <h2>标签识别\n换行符实现换行显示？

元素中\n换行不生效的问题 #

嘿，我之前也踩过这个坑！HTML元素默认会把连续的空白字符（包括换行符\n）合并成一个空格，所以你直接用\n设置<h2>的内容时，页面上只会显示成一行——控制台输出正常是因为控制台本身会识别\n作为换行符，和HTML的渲染规则不一样。给你几个实用的解决办法：

方法1：使用<br>标签强制换行 #

这是最直接的方式，把你原本的\n替换成HTML的换行标签<br>。比如你原本的代码如果是这样：

const heading = document.querySelector('h2');
heading.textContent = '第一行\n第二行'; // 页面显示为一行

修改成用innerHTML设置内容，替换\n为<br>：

heading.innerHTML = '第一行<br>第二行'; // 页面会正常换行

方法2：用CSS的white-space属性保留换行 #

如果不想修改文本内容里的\n，可以给<h2>添加CSS样式，让它识别换行符：

h2 {
  white-space: pre-line;
}

这个属性会保留文本中的换行符，同时自动合并多余的空格，非常适合文本里已经包含多个\n的场景。设置完CSS后，你原本的textContent写法就能正常生效了：

heading.textContent = '第一行\n第二行'; // 现在页面会正常换行

另外还有white-space: pre选项，它会保留所有空白字符（包括空格和换行），但文本不会自动换行，适合需要严格保留格式的场景，根据你的需求选择就行。

方法3：用<pre>标签包裹（不推荐，仅作补充） #

如果你想快速保留格式，可以用<pre>标签把文本包起来，但<pre>默认会用等宽字体，而且自带默认边距，需要额外调整样式，所以一般不如前两种方法实用：

<h2><pre>第一行
第二行</pre></h2>

总结一下：如果需要精确控制每个换行位置，选方法1；如果文本里已经有大量\n不想逐个替换，选方法2最省心。

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