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

曼亚灿

发布于 2023-05-17 15:33:47

5.2K0

在家闲得扣脚...

请注意，本文编写于 1012 天前，最后修改于 1012 天前，其中某些信息可能已经过时。

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

实现效果

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

移动端效果

PC端效果

实现思路

利用在一句话内插入 换行符，然后利用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为分界线区分，然后在中插入 来实现换行，利用CSS媒体查询对 在不同屏幕尺寸下进行显示和隐藏操作，从而达到可以在不同屏幕尺寸下换行的效果。

----- END -----

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除

css

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

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

实现效果

实现思路

实现代码

思路分析

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐