css超出内容以省略号显示

控制只显示2行,并以省略号结束

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

效果显示

    不过值得注意的是,双行超出显示的话,根据line-height行高显示的话
    要同时设置高和行高的话,要注意:如height:48px;line-height:24px;
    或:直接:line-height:24px;

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

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

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

效果显示

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

posted @ 2017-08-08 10:17  梁凤波  阅读(158)  评论(0编辑  收藏  举报