在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来同时保留换行和允许自动换行