使用white-space属性可控制HTML文本换行,pre保留格式不换行,pre-wrap保留格式且自动换行,pre-line合并空格保留换行,配合word-wrap处理长单词溢出。

在HTML中,文本默认会忽略换行符和多余的空格。如果想让文本按预想的格式换行显示,需要使用CSS的 white-space 或 word-wrap 属性来控制。下面介绍几种常用的换行显示方法。
1. 使用 white-space: pre
保留文本中的空白符和换行符,但不自动换行。适合显示代码或保持原始格式。示例:
立即学习“前端免费学习笔记(深入)”;
这是第一行 这是第二行 这里有缩进
2. 使用 white-space: pre-wrap
保留空白和换行,并允许文本在容器边界处自动换行。这是最常用的换行显示方式。示例:
立即学习“前端免费学习笔记(深入)”;
这是一段很长的文字, 它会在容器宽度不够时自动换行, 同时保留你输入时的换行和空格。
3. 使用 white-space: pre-line
合并空白符,但保留换行符,并允许自动换行。适合处理用户输入的多行文本。示例:
立即学习“前端免费学习笔记(深入)”;
开头有很多空格, 但会被合并成一个空格, 换行依然保留。
4. 配合 word-wrap(或 overflow-wrap)处理长单词
当文本包含超长单词或URL时,即使设置了 pre-wrap,也可能溢出容器。此时可使用 word-wrap: break-word 来强制断行。示例:
立即学习“前端免费学习笔记(深入)”;
https://this-is-a-very-long-url-that-needs-to-break-properly.com
基本上就这些常用方法。根据你的需求选择合适的 white-space 值,再配合 word-wrap 处理特殊情况,就能实现理想的换行效果。











