如何在 HTML 中进行换行

在 HTML 中插入换行会影响网页整体的可读性和美观度。有以下几种方法可以实现在 HTML 中进行换行。

1. 使用
标签

<br> 标签是 HTML 中最简单的换行方法，只需要在需要换行的地方插入该标签即可。

示例代码：

<p>这是一段文字，<br>这是下一行文字。</p>

效果：

这是一段文字， 这是下一行文字。

2. 使用 CSS 的 white-space 属性

CSS 的 white-space 属性可以控制元素中空格和换行的处理方式。通过将该属性设置为 pre-line，则连续的空格和换行符将被合并成一个空格，并且在元素中的文本自动折行。

示例代码：

<p style="white-space:pre-line;">这是一段文字，
这是下一行文字。</p>

效果：

这是一段文字， 这是下一行文字。

3. 使用 CSS 的 word-wrap 属性

CSS 的 word-wrap 属性可以控制文本的换行方式。当文本超出父元素的边界时，将根据该属性的设置方式进行处理。将该属性设置为 break-word，则文本将在单词之间断开换行。

示例代码：

<p style="word-wrap:break-word;width:40px;">
  这是一段非常非常非常长的文字。
</p>

效果：

这是一段非常非 常非常长的文字。

4. 使用 CSS 的 hyphens 属性

CSS 的 hyphens 属性可以在单词间自动添加连字符 "-" 或者实现其他的字符连接形式。通过将该属性设置为 auto，则长单词在需要地方就会自动折行并添加连字符。

示例代码：

<style>
  p {
    width: 200px;
    hyphens: auto;
  }
</style>

<p>这是一段非常非常非常长的文字。</p>

效果：

这是一段非常非常非常长的 文-字。