-webkit-line-clamp 多行文字溢出...

1、應用

CSS代碼：

.box {
    width: 100px; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

HTML代碼：

<div class="box">
    美國進口Culturelle康萃樂益生菌30片兒童水果味LGG益生菌咀嚼片
</div>

效果：

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

2、理解

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

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

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

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

 

3、兼容性

這個屬性 目前僅支持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(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;

}

View Code  

這裏注意幾點：

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});

 

2.jQuery插件-jQuery.dotdotdot   這個使用起來也很方便：

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

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

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