「HTML&CSS」文本自适应换行

这又是一个晚期强迫症患者的{{技术贴: xia che dan}}教程。

实现效果

一句话用<p></p>标签包裹，然后在PC端一句话显示在一行，在移动端，一句话分为两行。

[photos]

[/photos]

实现思路

利用在一句话内插入<br>换行符，然后利用CSS媒体查询功能对换行符进行控制来实现。

实现代码

html页面：

<p class="copyright">啦啦啦啦啦啦啦<span class="breakPSpan">&nbsp;&brvbar;&nbsp;</span><br class="breakPBr" style="display:none">啊啊啊啊啊啊啊啊</p>

css控制：

@media screen and (max-width: 736px) {
    #wrapper {
        padding: 2rem 1rem;
    }
    
    /*footer p标签自动换行*/
    .breakPSpan {
        display: none;
    }
    
    .breakPBr {
        display: inline-block!important;
    }
}

思路分析

将PC端（包括平板）和移动端的设备屏幕尺寸以736px为分界线区分，然后在<p></p>中插入<br>来实现换行，利用CSS媒体查询对<br>在不同屏幕尺寸下进行显示和隐藏操作，从而达到<p></p>可以在不同屏幕尺寸下换行的效果。