多行顯示時，最后一行超出的部分隱藏並顯示省略號

網上很多的解決方法是針對一行超出部分，隱藏並顯示省略號的，代碼如下：

overflow:hidden;
white-space:norwrap;
text-overflow:hidden;

針對webkit瀏覽器，多行顯示時可以通過以下css代碼實現，但對於非webkit瀏覽器，這種寫法沒有效了。

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

有沒有一種通用的方法來實現，當然有，通過偽類:after來實現

span{
margin:0 19px 4px 17px;
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;
}

但這種寫法有點問題，就是只能針對三行的情況，如果內容少於三行時，省略號仍然在第三行，還是有點問題，現進行如下修改：

將span的height去掉，添加max-height:57px;就可以實現多行超出部分隱藏顯示省略號的問題

span{
margin:0 19px 4px 17px;
width:112px;
max-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;
}　　

還有一種寫法，跟第一種類似，只是加了兼容的寫法

max-height: 44px;
  word-wrap:break-word;
  text-overflow: -o-ellipsis-lastline;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

　　

 

記錄下碼代碼時的問題。