css文本溢出隱藏顯示省略號（單行+多行）
文本超出若幹行就換行，這個功能幾乎每個文本瀏覽網站都會用到，實現它的辦法也有很多，今天簡單的介紹一下實現它的方法。
一. 單行文本不換行，並將超出文本隱藏
.box-content{
overflow: hidden;//文本溢出隱藏
text-overflow: ellipsis;//文本溢出顯示省略號
white-space: nowarp;//不換行
}
二. 在Webkit內核的瀏覽器中實現多行文本隱藏並顯示省略號
在webkit內核中，可以利用-webkit-line-clamp屬性，它的值是數字(1, 2, 3…)，但它不是CSS標準，只在webkit中實現，必須針對塊級元素，
並將元素的display屬性設為:-webkit-box，
以及-webkit-box-orient屬性設為:vertical，具體如下：
.box-content{
display: -webkit-box; //將元素設為盒子伸縮模型顯示
-webkit-box-orient: vertical; //伸縮方向設為垂直方向
-webkit-line-clamp: 3; //超出3行隱藏，並顯示省略號
overflow: hidden;
}
因為它是webkit內核瀏覽器的實現，對於其他瀏覽器並不兼容，所以為了兼容更多的瀏覽器，可以如下的方法來實現。
三. 兼容所有瀏覽器的方法
這種方法利用css的偽選擇器after來實現，將元素定位設為relative，將偽選擇器設為absolute，在對偽選擇器的位置進行調整即可。如下：
兩行溢出省略
p {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
width: 60px;
}
p::after {
display: block;
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
}
提示：設置要顯示的行數只需要將height設為line-height的整數倍即可。
由於ie6-7不顯示content內容，所以要添加標簽兼容ie6-7（如：<span>…<span/>）；兼容ie8需要將::after替換成:after。
css文本溢出隱藏顯示省略號（單行+多行）