美國進口Culturelle康萃樂 
益生菌30片兒童水果味LGG...

二、理解

注意：-webkit-line-clamp是webkit的私有屬性，是一個 不規范的屬性（unsupported WebKit property），
它沒有出現在 CSS 規范草案中。

        -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，
它需要組合其他的WebKit屬性。常見結合屬性：

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

        -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。

三、兼容性

這個屬性 目前僅支持webkit瀏覽器，比較合適WebKit瀏覽器或移動端
（移動端絕大部分是WebKit內核的瀏覽器）

跨瀏覽器兼容的方案

A：比較靠譜簡單的做法就是設置相對定位的容器高度，用包含省略號(…)的元素模擬實現

p { 

　　position: relative; 

　　line-height: 1.4em; 

　　height: 4.2em; 

　　overflow: hidden; 

} 

p::after { 

　　content: "..."; 

　　font-weight: bold; 

　　position: absolute; 

　　bottom: 0; 

　　right: 0; 

　　padding: 0 20px 1px 45px; 

　　background: url(images/ellipsis_bg.png) repeat-y; 

}

這里注意幾點：

height高度正好是line-height的3倍；

結束的省略好用了半透明的png做了減淡的效果，或者設置背景顏色；

IE6-7不顯示content內容，所以要兼容IE6-7可以是在內容中加入一個標簽，
比如用<span class="line-clamp">...</span>去模擬；

要支持IE8，需要將::after替換成:after；

B：Javascript （插件）方案    

用js也可以根據上面的思路去模擬，實現也很簡單

1.clamp.js   使用也非常簡單：

var module = document.getElementById("clamp-this-module"); 

$clamp(module, {clamp: 2});

$(function(){ 
　　$("wrapper").dotdotdot({ 
　　　　// configuration goes here 
　　}); 
});

延伸：單行文本溢出顯示省略號...代碼

  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap