大家都知道用text-overflow:ellipsis屬性來(lái)實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)(…)。當(dāng)然部分瀏覽器還需要加寬度width屬性。

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

但是這個(gè)屬性并不支持多行文本溢出顯示省略號(hào)；

1、 WebKit瀏覽器或移動(dòng)端的頁(yè)面

在WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁(yè)面實(shí)現(xiàn)比較簡(jiǎn)單，可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個(gè) 不規(guī)范的屬性。

1. display: -webkit-box; 必須結(jié)合的屬性 ，將對(duì)象作為彈性伸縮盒子模型顯示 。
2. -webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。
3. text-overflow: ellipsis;，可以用來(lái)多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本 。
   p {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   }
   這個(gè)屬性比較合適WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的）瀏覽器。

2、設(shè)置相對(duì)定位的容器高度，用包含省略號(hào)(…)的元素模擬實(shí)現(xiàn)；

    p {
        width: 200px;
        position: relative;
        line-height: 1.4em;
        height: 2.8em;
        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;
    }

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

2.1height高度真好是line-height的倍數(shù)；

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

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

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

3、.jQuery插件-jQuery.dotdotdot