找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

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

作者:模板之家 2018-4-20 10:55 5622人关注

用于标题文本太长显示不下的场景控制只显示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;

 

在微信小程序中,对view与text均有效。

 

参考了文章

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

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



路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)