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% 是为了当溢出时，省略号在最右边显示
该方法兼容良好，适合各大主流浏览器
css实现单行和多行省略号
原文地址：https://www.cnblogs.com/wmydb/p/9938831.html