HTML文本换行显示几种方法总结

在HTML中实现文本换行显示有以下几种常用方法：

1. 使用 <br> 标签

最直接的换行方式：

<p>
  这是第一行<br>
  这是第二行<br>
  这是第三行
</p>

2. 使用 <pre> 标签

保留原始文本格式，包括换行和空格：

<pre>
这是第一行
这是第二行
  这里保留了空格
</pre>

3. 使用 CSS 样式

方式一：white-space: pre-line

<p style="white-space: pre-line;">
  这是第一行
  这是第二行
  这是第三行
</p>

方式二：white-space: pre-wrap

<div style="white-space: pre-wrap;">
  这是第一行
  这是第二行
  这里有很多空格      也会被保留
</div>

方式三：white-space: pre

<p style="white-space: pre;">
  文本将完全按照源代码中的格式显示
  包括所有换行和空格
</p>

4. 不同CSS属性对比

<div style="white-space: normal;">默认：合并空格和换行</div>
<div style="white-space: nowrap;">不换行：所有内容在一行</div>
<div style="white-space: pre;">保留所有空格和换行</div>
<div style="white-space: pre-wrap;">保留换行，允许自动换行</div>
<div style="white-space: pre-line;">合并空格，保留换行</div>

5. 实战示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .pre-line {
      white-space: pre-line;
      background-color: #f0f0f0;
      padding: 10px;
      margin: 10px 0;
    }
    .pre-wrap {
      white-space: pre-wrap;
      background-color: #e0e0e0;
      padding: 10px;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <!-- 使用br标签 -->
  <p>第一行<br>第二行<br>第三行</p>
  
  <!-- 使用pre标签 -->
  <pre>
  这是pre标签
  保留所有格式
      包括缩进
  </pre>
  
  <!-- 使用CSS -->
  <div class="pre-line">
    这是第一行
    这是第二行
    多个空格   会被合并
  </div>
  
  <div class="pre-wrap">
    这是第一行
    这是第二行
    多个空格   会被保留
  </div>
</body>
</html>

推荐使用场景

• 简单换行 ：使用 <br> 标签
• 需要保留格式的代码/诗歌 ：使用 <pre> 标签
• 从数据库/API获取的带换行文本 ：使用 white-space: pre-line 或 white-space: pre-wrap
• 需要响应式设计：使用CSS方式，能更好地适应不同屏幕尺寸

注意事项

• 在HTML中直接输入的换行符（回车）默认不会被显示
• 从JavaScript字符串或后端API获取的文本中的换行符（\n）可以使用CSS的 white-space 属性来显示
• 如果文本内容来自用户输入，建议使用 white-space: pre-wrap 来同时保留换行和允许自动换行
  参考：https://www.abcode.cn/articles/html-newline