css样式[三行文字省略号查看更多]

关注

原创最新推荐文章于 2026-03-06 02:36:31 发布 8.7k 阅读 AI 写同款· GEO 优化 ›

微信小程序-多行文本省略号并展示查看更多按钮想要实现的效果如图超过三行则显示省略号并且显示查看全部的按钮。实现原理，首先让文本全部展示，然后根据文本所在view的高度判断是否超过三行，如果超过则说明如果使用样式会出现省略号。通过设置对应的一个参数来表示是否超过三行。这里我贴一下主要的代码和样式。超过三行则出现省略号的样式： .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; 阅读详情

这里写图片描述

/*  三行文字 省略号    */
.lookmoretop{
        overflow : hidden;  
        text-overflow: ellipsis;  
        display: -webkit-box;  
        -webkit-line-clamp: 3;  
        -webkit-box-orient: vertical;  
        width: 300px;  
        margin-top: 20px;
        margin-left: 10px;
        padding: 10px;
        border-radius: 25px 25px  0px 0px;
        background-color: rgba(204, 204, 204, 0.3);
        height: 68px; 
}
/* 查看更多 */
.lookmorebottom{
    border-radius: 0px 0px  25px 25px;
    background-color: rgba(204, 204, 204, 0.3);
     width: 320px; 
     margin-left: 10px;
     text-align: center;
     color: rgba(14, 14, 212, 0.61) 
}