「HTML&CSS」文本自适应换行
在家闲得扣脚...
请注意，本文编写于 1012 天前，最后修改于 1012 天前，其中某些信息可能已经过时。
这又是一个晚期强迫症患者的技术贴( xia che dan)教程。
实现效果
一句话用<p></p>标签包裹，然后在PC端一句话显示在一行，在移动端，一句话分为两行。
移动端效果
PC端效果
PC端效果
实现思路
利用在一句话内插入<br>换行符，然后利用CSS媒体查询功能对换行符进行控制来实现。
实现代码
html页面：
<p class="copyright">啦啦啦啦啦啦啦<span class="breakPSpan"> ¦ </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>可以在不同屏幕尺寸下换行的效果。
----- END -----
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录