css文本溢出省略号大总结

一行：

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    word-break: break-all;

两行：

width: 215px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
overflow: hidden;
line-height: 145%;

手动控制最后一行长度和省略号长度：
<style>
        .content{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;/* 这里是超出几行省略 */
    overflow: hidden;
    position: relative;
    line-height: 20px; /*注意高度控制*/
    max-height: 40px;
     width: 500px;
}
 
.content:after{
    content: "......";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: 352px;
    padding-left: 4px;
    background: linear-gradient(to right, transparent, #fff 0%);
}
</style>
<body>    
<p class="content">
    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
</p>
</body>
posted @ 2021-09-09 10:30  勇敢牛牛20  阅读(520)  评论(0)    收藏  举报