Html使用简单的br代码来实现文本等换行的功能

Html代码中有一个很好用的换行标签：<br>，可以很轻松的实现某html代码后面加个换行。即，<br>等于一个换行符号。一般情况下，我们是用不到的。但，总是有些电脑手机CSS样式有区别时，这个<br>就可以发挥很大的用处，就比如本文所说的例子。

为什么要用br

不知道之前，有没有注意过网站底部的版权申明部分。电脑端显示是两排，手机端由于第一排内容过多，而自动随缘把部分文字移动到了第二排，一共变成了三排。极其不美观，如下图所示：

这个时候，我回想起第一排后面加了个<br>才实现了，电脑端变成两排。不然，会只有一排，超出一排的，自动变到第二排。

不用问，这种手机端第二排太长，变成第三排的情况，也可以用<br>来解决。

br怎么用

一般情况下，我们要实现换行，只需要在需要换行的地方，插入一个<br>就可以了。但是，本文描述的情况是，电脑端不需要换行，而手机端需要换行。

那么这种情况，我们就可以使用<br>搭配CSS来实现这个功能了。

首先，在需要插入换行符号的地方插入如下代码：

<br class="phone">

接着，我们在主题自定义选项中，插入如下CSS代码：

br.phone {
    display: none;
}
@media (max-width:550px){
br.phone {
    display: block!important;
}
}

上述代码表示，默认情况下br.phone不显示；当屏幕尺寸小于550px的时候，br.phone生效。

最终调整完，效果图如下：

什么是br标签

看了那么多字，是不是晕乎乎的。其实，<br>就是一个没有结束标签的单独标签，功能是换行。