用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序灵动电商:使用css控制文本只显示2行防止溢出

Rolan 2017-6-8 15:58

用于标题文本太长显示不下的场景控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 同理,3行4行都是不在话下对于平时只 ...


用于标题文本太长显示不下的场景 控制只显示2行,并以省略号结束


    text-overflow: ellipsis; 
    display: -webkit-box;  
    -webkit-line-clamp: 2;  
    -webkit-box-orient: vertical; 


同理,3行4行都是不在话下


对于平时只显示一行的,代码要更加简单一些


    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;


在微信小程序中,对viewtext均有效。


参考了文章

1.http://blog.csdn.net/this_itboy/article/details/51799086

2.http://www.divcss5.com/rumen/r532.shtml

源码下载:[http://git.oschina.net/dotton/lendoo-wx](http://git.oschina.net/dotton/lendoo-wx),本文涉及代码存于/pages/cart/文件夹中。



鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 黄秀杰

相关阅读