HTML换行技巧：white-space与word-wrap应用解析

还在为HTML文本的换行显示而烦恼吗？本文将深入探讨**HTML文本换行显示方法**，重点讲解CSS属性**white-space**与**word-wrap**的应用技巧，助你轻松驾驭文本格式。默认情况下，HTML会忽略换行符和多余空格。通过设置`white-space`属性，例如`pre`保留格式但不换行，`pre-wrap`保留格式并自动换行，`pre-line`合并空格保留换行，我们可以实现不同的换行效果。此外，针对超长单词溢出的问题，`word-wrap: break-word`能有效解决。掌握这些技巧，让你的网页文本排版更加美观、专业！

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

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

1. 使用 white-space: pre

示例：

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

2. 使用 white-space: pre-wrap

示例：

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

3. 使用 white-space: pre-line

示例：

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

4. 配合 word-wrap（或 overflow-wrap）处理长单词

示例：

<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换行技巧：white-space与word-wrap应用解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！