webkit浏览器下多行显示，有省略号效果

 

多行显示情况

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

除了上述，还有其他的解决方法，但要兼容其他浏览器，还是比较麻烦的

可以通过设置高度来解决。

另外，刚刚测试了一种方法:

span{
width:112px;
height:57px;
position: relative; 
line-height: 20px;
overflow: hidden;
display:block;
}

span:after{
content: "..."; 
position: absolute;
bottom: 0;
right: 0;
 padding:0 17px 1px 0px;
width:27px;
height:20px;
color:#fff;
background-color:#333;}

通过设置伪类宽度和高度，可以遮挡省略号下面的字体。这种可以在IE浏览器下实现省略号

 

单行显示

一般设置下宽度

width:112px;
white-space:nowrap; 
text-overflow:ellipsis;  
overflow:hidden;