多行文字溢位顯示省略號

大家應該都知道用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

這裡注意幾點：

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

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

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

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

多行文字溢位顯示省略號

這裡是i喵醬,這個是乙個多行超出換行的小demo,看這裡看這裡 overflow hidden 內容會被修剪，超出隱藏。text overflow ellipsis 超出範圍顯示 display webkit box 把物件轉換成彈性盒模型 webkit box orient vertical 設定...

多行文字溢位顯示省略號

大家應該都知道用text overflow ellipsis屬性來實現單行文字的溢位顯示省略號 當然部分瀏覽器還需要加寬度width屬性。css overflow hidden text overflow ellipsis white space nowrap 但是這個屬性並不支援多行文字溢位顯示省...

多行文字溢位顯示省略號

單行文字的溢位顯示省略號 text overflow ellipsis 部分瀏覽器還需要加寬度width屬性。overflow hidden text overflow ellipsis white space nowrap 多行文字溢位顯示省略號 在webkit瀏覽器或移動端 絕大部分是webki...