css实现单行和多行省略号

1.单行省略

{
width:300px;
overflow: hidden;
text-overflow:ellipsis;
whitewhite-space: nowrap;
}

注：单行省略必须设置宽度

2.多行省略

{
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:;
-webkit-box-orient:vertical;
}

以上方式存在兼容问题，只有带webkit内核的浏览器才兼容

<div class="container">
<div class="text">
 dsasssssefewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwfvffdassssssssssssssssssss
</div>
</div>

        .container{
            height: 40px;
            line-height: 20px;
            width: 100%;
            overflow: hidden;
        }
        .container .text{
            float: right;
            margin-left: -15px;
            width: 100%;
            color: #000;
            word-break: break-all;
            word-wrap: break-word;
        }
        .container::before{
           float:left;
           width: 15px;
           content: '';
           height: 40px;
        }
        .container::after{
            float: right;
            content: '...';
            height: 20px;
            line-height: 20px;
            width: 3em;
            text-align: right;
            margin-left: -3em;
            position: relative;
            left: 100%;
            top:-20px;
            padding-right: 15px;
background: -webkit-linear-gradient(left, transparent, #fff 52%);
background: -o-linear-gradient(rightright, transparent, #fff 52%);
background: -moz-linear-gradient(rightright, transparent, #fff 52%);
background: linear-gradient(to rightright, transparent, #fff 52%);
        }

::before占了一个位置，为了让::after显示的内容在右边显示作铺垫，float:right为了让省略号在不溢出的情况下在最右边显示，::after 中position:relative;left:100% 是为了当溢出时，省略号在最右边显示　　

该方法兼容良好，适合各大主流浏览器