加载本地.txt文件到网页<p>标签时如何保留行间距？

嘿，这个问题我碰到过好多次啦！核心原因是HTML里的普通文本换行（\n）会被浏览器当成空白字符合并掉，<p>标签默认不会处理这些换行。给你几个实用的解决办法：

• 用CSS快速搞定（首推）
  给你的<p>标签添加以下CSS样式，不用改任何脚本代码就能搞定：

  p {
    white-space: pre-line;
  }
  

  这个属性会自动识别文本里的换行并转换成行间距，同时还会合并多余的连续空格，完美适配普通文本的阅读需求，省心又高效。

• 用JavaScript手动替换换行符
  如果你需要更精确的格式控制，可以在插入文本前把换行符替换成HTML的换行标签<br>：

  // 假设加载后的原始文本存在text变量中
  const formattedText = text.replace(/\n/g, '<br>');
  document.querySelector('p').innerHTML = formattedText;
  

  这种方式适合只需要替换特定换行的场景，比如排除空行之类的自定义需求。

• 换用

  标签（适合代码/纯格式文本）
  
  如果你的本地文件是代码或者需要完整保留所有空格、换行的格式，直接用<pre>标签代替<p>即可，它会原样渲染文本里的所有格式：
  <pre id="file-content"></pre>
  要是觉得默认的等宽字体不合适，可以加个CSS样式调整：
  pre {
    font-family: inherit;
  }
  

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