背景：在做響應式系統設計的時候，經常遇到需要對標題進行文字擷取的效果，如下圖所示：

一、先從單行文字截斷入手

      一般，實現單行文字截斷比較容易，使用文字溢位text-overflow:ellipsis;就可以實現單行文字截斷了，示例如下：

div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

   在單行文字截斷的基礎上，我們模擬多行文字，使用overflow:hidden進行省略；

<style>
height:40px;
line-height:20px;
overflow:hidden;
</style>
<p>希望是一個好東西，希望是一個好東西，也許是最好的，好東西是不會,希望是一個好東西，也許是最好的，
好東西是不會,希望是一個好東西，也許是最好的，好東西是不會</p>
 

  此情況，適用於多行列數已知，使用overflow:hidden進行省略，但是無法達到自適應多行，進行自動省略，並且沒有省略號出現。

二、使用-webkit-line-clamp實現，適用於移動端

div {
    display: -webkit-box;
    overflow: hidden;
    -webkit-lin-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

 它需要和display、-webkit-box-orient和overflow結合使用：

 display:-webkit-box;必須結合的屬性，將物件作為彈性伸縮盒子模型顯示；

-webkit-box-orient;必須結合的屬性，設定或檢索伸縮盒物件的子元素的排列方式；

text-overflow:ellipsis;可選屬性，可以用來多行文字的情況下，用省略號“...”隱藏超出範圍的文字。

從效果上來看，它的優點有：

①響應式截斷，根據不同寬度做出調整；

②文字超出範圍才顯示省略號，否則不顯示省略號；

③遊覽器原生實現，所以省略號位置顯示的剛好。

使用場景：多用於移動端頁面，因為移動裝置遊覽器更多是基於webkit核心，除了相容性不好，實現截斷的效果不錯。（因為-webkit-line-clamp是一個不規範的屬性，只有webkit核心的遊覽器才支援這個屬性，像Firefox，IE遊覽器系統都不支援這個屬性，遊覽器相容性不好。）

三、定位元素實現多行文字截斷

這種方法就是設定相對定位的容器高度，用包含省略號（...）的元素模擬實現，實現方式如下：

p {
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}
p::after {
    content: "...";
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
    /*為了展示更好的效果*/
    background: -webkit-gradient(linear,left top,right   top,from(rgba(255,255,255,0)),to(white),color-stop(50%,white));
    background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
    background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
    background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
    background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white);    
}

  通過偽元素絕對定位到行尾並遮住文字，再通過overflow:hidden隱藏多餘文字。

  從實現效果來看，它所具備的優點：

  ①相容性好，對各大主流遊覽器有較好的支援；

  ②響應式截斷，根據不同寬度做出調整。

  使用場景：文字內容較多，確定文字內容一定會超過容器的，那麼選擇這種方式不錯。