1.单行省略
{
width:300px;
overflow: hidden;
text-overflow:ellipsis;
whitewhite-space: nowrap;
}
注：单行省略必须设置宽度
2.多行省略
{
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2;
-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% 是为了当溢出时，省略号在最右边显示
该方法兼容良好，适合各大主流浏览器
原文：https://www.cnblogs.com/wmydb/p/9938831.html