小程序模板网

在线观看亚洲无码视频 微信小程序文字控制单行超过显示省略号

发布时间:2021-07-09 10:02 所属栏目:小程序开发教程

在小程序开发过程中,经常会遇到一些数据无法在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的数字,就可以实现对应的需求了。


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:http://www.ahtianchi.com/wxmini/doc/course/27088.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询
  • 业务客服
  • 付费修改
  • 加入Q群
  • 微信客服

    工作日 8:30-12:00 14:30-18:30

AI智能客服 ×