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

最新推荐文章于 2024-08-10 11:59:42 发布

原创最新推荐文章于 2024-08-10 11:59:42 发布 · 8.7k 阅读

2 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用CSS实现文本省略号及多行溢出隐藏的效果，通过具体样式设置展示了如何限制元素内的文本显示行数，并在超出部分使用省略号表示。适用于网页中对文章或评论等内容进行预览展示。

这里写图片描述

/*  三行文字 省略号    */
.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) 
}