多行文字溢位顯示省略號全攻略

大家應該都知道用text-overflow:ellipsis屬性來實現單行文字的溢位顯示省略號(…)。當然部分瀏覽器還需要加寬度width屬性。

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

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

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

常見結合屬性：

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

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

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

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

這個屬性比較合適webkit瀏覽器或移動端（絕大部分是webkit核心的）瀏覽器。

具體例子可以檢視

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

例如：

p p:: after

看demo：

src="" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen" style="box-sizing: border-box; border-width: 0px; border-style: initial; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; max-width: 100%;">

這裡注意幾點：

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

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

ie6-7不顯示content內容，所以要相容ie6-7可以是在內容中加入乙個標籤，比如用...去模擬；

要支援ie8，需要將::after替換成:after；

用js也可以根據上面的思路去模擬，實現也很簡單，推薦幾個做類似工作的成熟小工具：

1.clamp.js

使用也非常簡單：

var
module 
=document
.getelementbyid
("clamp-this-module"
);$clamp
(module,);

demo：

id="cp_embed_ackqk" src="" scrolling="no" frameborder="0" height="468" allowtransparency="true" allowfullscreen="true" name="codepen embed" title="codepen embed" class="cp_embed_iframe undefined" style="box-sizing: border-box; border-width: 0px; border-style: initial; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; max-width: 100%; width: 728px; overflow: hidden;">

2.jquery外掛程式-jquery.dotdotdot

這個使用起來也很方便：

$
(document
).ready
(function
());
});

參考：

多行文字溢位顯示省略號 全攻略

多行文字溢位顯示省略號 全攻略

多行文字溢位顯示省略號

多行文字溢位顯示省略號

相關推薦

多行文字溢位顯示省略號全攻略

多行文字溢位顯示省略號全攻略