1.單行文字溢位
單行文字溢位一般沒有程式碼上的相容問題，
//需要對元素盒子設定一個寬度以相容部分瀏覽器
overflow: hidden; //超出部分隱藏
white-space: nowrap; //表示不換行
text-overflow: ellipsis; //加省略號

2.多行文字溢位
適用於webkit瀏覽器（如chrome、QQ極速、搜狗等）和移動端。

display: -webkit-box; //必須有，物件作為彈性伸縮盒子模型顯示
overflow:hidden;
text-overflow: elipsis;
word-break: break-all;
-webkit-box-orient:vertical; //伸縮盒子子元素的排列方式
-webkit-line-clamp: 2 //數字表示是文字行數，如3，表示第三行會出現省略號

3.跨瀏覽器的相容方案
將相對定位的容器設定高度，同時用包含省略號的元素模擬實現.—多瀏覽器相容

p {
   position: relative; /* 設定相對定位*/
   width: 100px;
   line-height: 1.4em;
   height: 4.2em;/*高度設定為line-height的三倍 */
   overflow: hidden;
}
p::after {
    content:"..."; /*包含省略號的元素*/
    position: absolute;
    /*表示在右下的位置*/
    bottom: 0;
 
  
    right: 0;
    padding-left: 40px;
    /*設定漸變背景色*/
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%)
 
;
    /*或者用半透明圖片PNG*/
    backgroud: url(..xxx/ellipsis.png) repeat-y;
}

注意事項：

1. height是line-height的高度的三倍表示有三行；
2. 省略號元素用半透明的png或者設定漸變背景顏色，可以避免文字只顯示一半；
3. IE6-7不會顯示content內容，相容IE6-7在內容里加一個標籤如’<span class=“line-clamp”>…'去模擬省略號
4. 相容IE8將 ::after替換為 :after

但是該方法會使得在文字沒有超行的情況下也會顯示省略號。
解決辦法—使用JS實現，利用JS判斷行數達到要求後再新增多行省略的CSS樣式

p {
   position: relative; /* 設定相對定位*/
   width: 100px;
   line-height: 16px; /*行高為16px，如果是四行，高度為4*16=64px*/
   overflow: hidden;
}
.p-after:after {
    content:"..."; /*包含省略號的元素*/
    position: absolute;
    /*表示在右下的位置*/
    bottom: 0;  
    right: 0;
    padding-left: 40px;
    /*設定漸變背景色*/
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);

//獲取文字的行高和高度，對超過行數的部分限制高度，然後加上省略號
$(function(){
    $('p').each(function(i,obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        //判斷高度是否是行高的4倍即是否超過了四行
        if((height / lineHeight)> 4){
            $(this).addClass("p-after");
            $(this).css("height","64px");//line-height值*行數=高度值
        }else {
            $(this).removeClass("p-after");
        }
    })
})