CSS單行、多行文本溢出顯示省略號

• 單行文本溢出顯示省略號

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
（須要對容器設置單行高度）

• 多行文本溢出顯示省略號

  webkit瀏覽器或移動端的頁面

  在webkit瀏覽器或移動端（絕大部分是webkit內核的瀏覽器）能夠直接使用webkit的css擴展屬性（webkit是私有屬性）-webkit-line-clamp；
     注意：這是一個不規範的屬性，它沒有在CSS的規範草案中
     -webkit-line-clamp用來限制在一個塊元素顯示的文本行數，爲了實現效果，他要與一下webkit屬性結合使用：
         display:-webkit-box;（必須結合的屬性，將對象做爲彈性伸縮盒子模型展現）
         -webkit-box-orient（必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式）

  完整版寫法以下：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; (兩行文字)
-webkit-box-orient:vertical;

**跨瀏覽器兼容的方案**
比較靠譜簡單的作法就是設置相對定位的容器高度，用包含省略號（...）的元素模擬實現

p{
position:relative;
line-height:1.4em;
/*設置容器高度爲3倍行高就是顯示3行*/
height:4.2em;
overflow:hidden;
}
p::after{
content:'...';
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:#fff;
}

注意：IE6-7不顯示content內容，因此要兼容IE6-7能夠是在內容中加入一個標籤，好比<span>...</span>去模擬；要支持IE8，須要將::after替換爲:after

JavaScript解決方案

使用js也能夠根據上面的思路去模擬，實現也很簡單，推薦兩個作相似工做的成熟小工具：
一、clamp.js
二、jQuery插件  jquery.dotdotdot
使用簡單，實現方法自行百度