使用white-space属性可控制HTML文本换行，pre保留格式不换行，pre-wrap保留格式且自动换行，pre-line合并空格保留换行，配合word-wrap处理长单词溢出。
在HTML中，文本默认会忽略换行符和多余的空格。如果想让文本按预想的格式换行显示，需要使用CSS的 white-space 或 word-wrap 属性来控制。下面介绍几种常用的换行显示方法。
示例：
立即学习“前端免费学习笔记（深入）”；
<div style="white-space: pre;">
这是第一行
这是第二行
这里有缩进
</div>示例：
立即学习“前端免费学习笔记（深入）”；
<div style="white-space: pre-wrap;"> 这是一段很长的文字， 它会在容器宽度不够时自动换行， 同时保留你输入时的换行和空格。 </div>
示例：
立即学习“前端免费学习笔记（深入）”；
<div style="white-space: pre-line;"> 开头有很多空格， 但会被合并成一个空格， 换行依然保留。 </div>
示例：
立即学习“前端免费学习笔记（深入）”；
<div style="white-space: pre-wrap; word-wrap: break-word; width: 200px;"> https://this-is-a-very-long-url-that-needs-to-break-properly.com </div>
基本上就这些常用方法。根据你的需求选择合适的 white-space 值，再配合 word-wrap 处理特殊情况，就能实现理想的换行效果。
以上就是html如何换行显示_HTML文本（white-space/word-wrap）换行显示方法的详细内容，更多请关注php中文网其它相关文章！
全网最新最细最实用WPS零基础入门到精通全套教程！带你真正掌握WPS办公！ 内含Excel基础操作、函数设计、数据透视表等
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
143
