超出多少字用省略号代替

对于单行文字, 很简单.

.oneLine {  
    width: 200px;  
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
}

　　对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持.

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

　　

你只要调整-webkit-line-clamp的值就能实现在第n行[...].

 

对于其他内核的浏览器就只能用javascript来hack了.

 

 

参考地址：

http://yanzhihong23.iteye.com/blog/1743395

 

http://www.css88.com/webkit/-webkit-line-clamp/

 

转载于:https://www.cnblogs.com/chuxinsyn/p/9329107.html