大家應該都知道用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：
這裡注意幾點：
height高度真好是line-height的3倍；
結束的省略好用了半透明的png做了減淡的效果，或者設定背景顏色；
ie6-7不顯示content內容，所以要相容ie6-7可以是在內容中加入乙個標籤，比如用...去模擬；
要支援ie8，需要將::after替換成:after；
1.clamp.js
使用也非常簡單：
varmodule =document.getelementbyid("clamp-this-module");
$clamp(module,);
demo：
2.jquery外掛程式-jquery.dotdotdot
這個使用起來也很方便：
$(document).ready(function());
});
單行溢位隱藏沒生效 css實現文字溢位隱藏
css實現文字溢位顯示省略號 在做響應式網頁的時候，我們要想在不同尺寸的裝置下保證布局不會錯亂，就需要對文字的長度進行限定。基礎設定 在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設定 基礎設定 div.box width 100px height 100px border 1px soli...
如何優雅解決單行溢位隱藏和多行溢位隱藏
1 單行溢位隱藏 overflow hidden text overflow ellipsis 多出部分以省略號形式隱藏 white space nowrap 禁止換行 normal可以換行 text overflow ellipsis 多出部分以省略號形式隱藏，還可以有其他形式隱藏，如clip，自...
clamp 文字溢位隱藏
2.示例 overflowhidden overflow divclass overflow 一段文字，一段文字，一段文字，一段文字，一段文字，一段文字，一段文字，一段文字。div divid overflowhidden 一段長長的文字，一段長長的文字，一段長長的文字，一段長長的文字，一段長長的文...