HTML断行 - 如何用HTML 标签断行当你写HTML时，你经常需要插入换行符。在地址、诗歌或文本超

当你写HTML时，你经常需要插入换行符。在地址、诗歌或文本超过浏览器的可用宽度时，断行是必不可少的。如果你不插入自己的换行符，那么文本就会以一种奇怪的方式被格式化。

在本教程中，我将通过一些 "有和无 "的例子，向你展示如何在你的HTML代码中插入换行符，这样你就可以开始正确使用它，更好地格式化你的文本。

基本的HTML断行语法

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

请注意，HTML会忽略任何来自键盘回车键的断行：

<br />

如果你想知道为什么上面的  标签里有一个正斜杠，在HTML4还被广泛使用的时候，这个斜杠是很重要的。有了HTML5，你就不需要再在里面放斜杠了。但两者都会做同样的事情。

如果你使用的是像prettier这样的代码格式化器，即使你不放斜线，它也会在你保存或粘贴时插入斜线。

如何在地址中插入换行符

例如，当你在信上写地址时，断行是很重要的，这样可以正确地格式化它。

下面是一个没有换行符的地址的例子

一个没有换行符的地址（  标签）看起来是这样的：

<p>
     The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
</p>

我添加了一些CSS代码，用Flexbox将所有内容居中，并使文字更大一些：

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

这就是它在浏览器中的样子：
address-without-line-breaks

这是一个有换行符的地址

这就是我们如何添加换行符来正确格式化我们的地址：

<p>
    The White House <br />
    1600 Pennsylvania Avenue <br />
    NW Washington, DC <br />
    20500 <br />
    USA
</p>

在浏览器中看起来是这样的：

address-with-line-breaks

如何在诗歌中添加断行符

诗歌通常是用简短的断句来写的，以便创造视觉层次，并很好地将其格式化。

因此，如果你想在你的HTML代码中写一首诗，  标签使你的格式化过程更容易。

一首没有换行符的诗

<p>
      I dabbled around a lot when I decided to learn to code 
      I went from A to Z with resources 
      When I decided to make my own things 
      I discovered I've been in the old all while 
      So I remained a novice in coding 
      But then I found freeCodeCamp 
      I got my hands on the platform 
      I went from novice to ninja in coding 
     And now I'm a camper for life
</p>

它在浏览器中看起来是这样的：

poem-without-line-break

你可以看到这首诗没有视觉层次，没有正确的格式化，所以它作为一首诗是无法阅读的。

有换行符的诗

<p>
      I dabbled around a lot when I decided to learn to code <br />
      I went from A to Z with resources <br />
      When I decided to make my own things <br />
      I discovered I've been in the old all while <br />
      So I remained a novice in coding <br />
      But then I found freeCodeCamp <br />
      I got my hands on the platform <br />
      I went from novice to ninja in coding <br />
      And now I'm a camper for life <br />
</p>

我还在CSS中改变了一下字体大小：

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   font-size: 2.5rem;
   max-width: 1000px;
   margin: 0 auto;
}

现在它在浏览器中看起来是这样的：

poem-with-line-break

你可以看到，这首诗现在更有可读性了，而且格式也正确了。

**一些有价值的建议。**不要使用  标签在块级元素（p,h1,h2,h3,div 等）之间强行添加空格。相反，使用CSS margin属性。

你可能想知道--既然  标签是一个元素，是否可以对它进行样式化处理？

嗯，这是可能的。但实际上没有必要对它进行样式化，因为它所做的只是创造几个空白。

总结

我希望本教程已经给你提供了使用  标签所需的背景知识，这样你就可以使你的HTML文本看起来更好。

谢谢你的阅读，并继续编写代码。

HTML断行 - 如何用HTML&lt;br&gt;标签断行