HTML 换行符——如何使用HTML <br> 标签换行 - 免费学习编程

在编写HTML 时，你经常需要插入换行符。

在地址、诗歌或文本超过可用浏览器宽度时，换行是必不可少的。

如果你不插入换行符，则文本的格式会很奇怪。

搜索 提交您的搜索查询 论坛 捐款 Chengjun.L 在编写HTML时，你经常需要插入换行符。

在地址、诗歌或文本超过可用浏览器宽度时，换行是必不可少的。

如果你不插入换行符，则文本的格式会很奇怪。

在本教程中，我将通过一些示例向你展示如何在HTML代码中插入换行符，以便你可以开始正确使用它，并更好地设置文本格式。

基本HTML换行符语法你可以使用
标签在HTML中插入换行符，这相当于键盘上的回车。

请注意，HTML将忽略通过键盘返回键输入的换行符。


如果你想知道为什么上面的
标签中有一个正斜杠，当HTML4仍然被广泛使用时，斜杠很重要。

使用HTML5，你不再需要在其中添加斜杠。

但两种方式的效果一样。

如果你使用的是prettier之类的代码格式化程序，则即使你没有将斜杠放入其中，它也会在你保存或粘贴时始终插入斜杠。

如何在地址中插入换行符例如，当你在信件上书写地址时，换行符很重要。

这是一个没有换行符的地址示例没有换行符（
标签）的地址如下所示：

TheWhiteHouse,1600PennsylvaniaAvenueNWWashington,DC20500,USA.

我添加了一些CSS代码，使用Flexbox把所有内容居中，并使文本更大一点：body{ display:flex; align-items:center; justify-content:center; height:100vh; font-size:3rem; max-width:1000px; margin:0auto; } 在浏览器中显示如下：这是一个有换行符的地址这就是我们如何添加换行符，以正确设置地址的格式：

TheWhiteHouse
1600PennsylvaniaAvenue
NWWashington,DC
20500
USA

在浏览器中显示如下：如何在诗歌中添加换行符诗歌通常是用简短的断句写成，以创建视觉层次结构，格式很漂亮。

因此，如果你想在HTML代码中写一首诗，
标签可以让你更轻松地进行格式化过程。

一首没有换行符的诗

IdabbledaroundalotwhenIdecidedtolearntocode IwentfromAtoZwithresources WhenIdecidedtomakemyownthings IdiscoveredI'vebeenintheoldallwhile SoIremainedanoviceincoding ButthenIfoundfreeCodeCamp Igotmyhandsontheplatform Iwentfromnovicetoninjaincoding AndnowI'macamperforlife

在浏览器中显示如下：你可以看到这首诗没有视觉层次，它的格式不正确，所以它作为一首诗是不可读的。

一首有换行符的诗

IdabbledaroundalotwhenIdecidedtolearntocode
IwentfromAtoZwithresources
WhenIdecidedtomakemyownthings
IdiscoveredI'vebeenintheoldallwhile
SoIremainedanoviceincoding
ButthenIfoundfreeCodeCamp
Igotmyhandsontheplatform
Iwentfromnovicetoninjaincoding
AndnowI'macamperforlife

我还在CSS中稍微更改了字体大小：body{ display:flex; align-items:center; justify-content:center; height:100vh; font-size:2.5rem; max-width:1000px; margin:0auto; } 在浏览器中显示如下：你可以看到这首诗现在更具可读性，并且格式美观。

一些有价值的建议：不要使用
标签在块级元素（p、h1、h2、h3、div等）之间强制使用空格。

请使用CSS边距属性。

你可能想知道-由于
标签是一个元素，是否可以对其进行样式设置？嗯，这是可能的。

但是并不需要对它做什么设计，因为它所做的只是创造了几个空白。

小结希望本教程为你提供了使用
标签所需的背景知识，以便你可以更好地排版HTML文本。

感谢你阅读本文。

编码愉快！原文：HTMLLineBreak–HowtoBreakaLinewiththeHTML
Tag，作者：KoladeChris Chengjun.L 阅读更多文章。

在freeCodeCamp免费学习编程。

freeCodeCamp的开源课程已帮助40,000多人获得开发者工作。

开始学习