小程序模板下载与定制平台
客服QQ客服QQ 客服微信客服微信 公众号公众号

微信小程序文本使用省略号隐藏的实现方法

微信小程序隐藏文本的实现方法。

在对应的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的数字,就可以实现对应的需求了。

TAG标签:微信小程序隐藏文本

上一个:小程序开发工具常用快捷键 掌握了就能提高效率
下一个:微信小程序传递参数的三种方法 看完发现这么简单

小程序模板

免责声明:本站资源均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。

咨询客服

QQ:1847629575

全年 09:00-23:00

(其他时间请留言)

在线客服

Copyright©2021 www.why114.com 瓦窑模板 版权所有 鲁ICP备20017802号

展开