html如何换行显示_HTML文本（white-space/word-wrap）换行显示方法

新闻中心 NEWS CENTER

2025-11-17

浏览次数：次

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

html如何换行显示_html文本（white-space/word-wrap）换行显示方法

在HTML中，文本默认会忽略换行符和多余的空格。如果想让文本按预想的格式换行显示，需要使用CSS的 white-space 或 word-wrap 属性来控制。下面介绍几种常用的换行显示方法。

保留文本中的空白符和换行符，但不自动换行。适合显示代码或保持原始格式。

示例：

ChatCut

AI视频剪辑工具

1086 查看详情 ChatCut

<div style="white-space: pre;">
这是第一行
这是第二行  
    这里有缩进
</div>

保留空白和换行，并允许文本在容器边界处自动换行。这是最常用的换行显示方式。

示例：

<div style="white-space: pre-wrap;">
这是一段很长的文字，
它会在容器宽度不够时自动换行，
同时保留你输入时的换行和空格。
</div>

合并空白符，但保留换行符，并允许自动换行。适合处理用户输入的多行文本。

示例：

<div style="white-space: pre-line;">
   开头有很多空格，
   但会被合并成一个空格，
   换行依然保留。
</div>

当文本包含超长单词或URL时，即使设置了 pre-wrap，也可能溢出容器。此时可使用 word-wrap: break-word 来强制断行。

示例：

<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）换行显示方法的详细内容，更多请关注其它相关文章！