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

4
(4)

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

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

为什么要用br

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

Html使用简单的br代码来实现文本等换行的功能
Html使用简单的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生效。

最终调整完,效果图如下:

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

什么是br标签

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

共计4人评分,平均4

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

文章目录

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/articles/2762.html

(1)
微信公众号
古哥的头像古哥管理团队
上一篇 2022年09月01日 20:17
下一篇 2022年09月02日 23:11

你可能感兴趣的文章

发表回复

登录后才能评论
微信小程序
微信公众号