主页 > 教程合集 > Html/css >

微信小程序文字超过行后隐藏并且显示省略号的实现方法

时间:2020-08-28 阅读:0

在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...)。

微信小程序文字超过行后隐藏并且显示省略号的实现方法

只需要在对应的text中设置下面的css就可以了:


overflow:hidden; //超出一行文字自动隐藏
text-overflow:ellipsis; //文字隐藏后添加省略号
white-space:nowrap; //强制不换行
 

不过上面的css只能保证单行显示隐藏,如果想要2,3,n行隐藏呢?这个要求其实也是可以通过css做到的。下面贴出css:


display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
 

只要改变其中-webkit-line-clamp的数字,就可以实现对应的需求了。

升级为终身VIP,即可免费下载全站所有千余TB网络资源,点击 >>> 资源目录 查看所有资源,覆盖音乐、影视、有声书、电子书、漫画、动漫、课程等,不限时间次数,永久免费,点击 >>> VIP特权 了解更多!

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2020-08-28最后更新,转载注明出处。

相关推荐

返回顶部