多行文字溢位顯示省略號(…)

大家應該都知道用<a href="//m.sbmmt.com/wiki/868.html" target="_blank">text-</a><a href="//m.sbmmt.com/wiki/923.html" target="_blank">overflow</a>:ellipsis屬性來實作單行文字的溢位顯示省略號(…)。當然部分瀏覽器也需要加寬度<a href="//m.sbmmt.com/wiki/835.html" target="_blank">width</a>屬性。

css 程式碼:

1. #

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

   登入後複製

但是這個屬性不支援多行文字溢出顯示省略號，這裡根據應用場景介紹幾個方法來實現這樣的效果。

WebKit瀏覽器或行動端的頁面

在WebKit瀏覽器或行動端（絕大部分是WebKit核心的瀏覽器）的頁面實作比較簡單，可以直接使用WebKit的CSS擴充屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個不規範的屬性（unsupported WebKit property），它沒有出現在CSS 規範草案中。

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

1. <a href="//m.sbmmt.com/wiki/927.html" target="_blank">display</a>: -webkit-box; 必須結合的屬性，將物件作為彈性伸縮盒子模型顯示。

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

3. text-overflow: ellipsis;，可以用來多行文字的情況下，用省略號「…」隱藏超出範圍的文字 。

css 程式碼:

1. #

   overflow : hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

   登入後複製

css 程式碼:

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(//m.sbmmt.com/) repeat-y;
}

#height高度真好是
1. line-height

   的3倍;

結束的省略好用了半透明的png做了減淡的效果，或是設定背景顏色；
IE6- 7不顯示
3. content

   內容，所以要相容IE6-7可以是在內容中加入一個標籤，例如用<span class="line-clamp">...</ span>去模擬；

要支援IE8，需要將
4. ::after

   替換成:after;

方案用

#也可以依照上面的想法去模擬，實作也很簡單，推薦幾個做類似工作的成熟小工具：1.Clamp.js

下載及文件位址：//m.sbmmt.com/

程式碼:

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

2.

外掛程式-jQuery.dotdotdot##這個使用起來也很方便：

程式碼:

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

登入後複製

以上是多行文字溢位顯示省略號(…)的詳細內容。更多資訊請關注PHP中文網其他相關文章！