css实现单行和多行省略号
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% 是为了当溢出时,省略号在最右边显示
该方法兼容良好,适合各大主流浏览器