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

二、理解

注意：-webkit-line-clamp是webkit的私有屬性，是一個(gè) 不規(guī)范的屬性（unsupported WebKit property），
它沒有出現(xiàn)在 CSS 規(guī)范草案中。

        -webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)。 為了實(shí)現(xiàn)該效果，
它需要組合其他的WebKit屬性。常見結(jié)合屬性：

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

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

三、兼容性

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

跨瀏覽器兼容的方案

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

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; 

}

這里注意幾點(diǎn)：

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

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

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

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

B：Javascript （插件）方案    

用js也可以根據(jù)上面的思路去模擬，實(shí)現(xiàn)也很簡單

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