1.單行文本

使用 text-overflow：ellipsis 屬性

text-overflow: clip|ellipsis|string;

clip：修剪文本。

ellipsis：顯示省略符號來代表被修剪的文本。

string：使用給定的字符串來代表被修剪的文本。

css:
? p? {
????????overflow: hidden;????/*超出部分隱藏*/
????????text-overflow:ellipsis;????/* 超出部分顯示省略號 */
????????white-space: nowrap;????/*規定段落中的文本不進行換行 */
????????width: 250px;????/*需要配合寬度來使用*/
????????border: 1px solid red;
????????font-size: 30px;
}

html:

<p>單行文本超出部分顯示省略號我是mdzz</p>?

2.多行文本顯示省略號，省略號在段尾

方法一：

p {
????????display: -webkit-box;
????????-webkit-box-orient: vertical;
? ? ? ? -webkit-line-clamp: 3;
????????overflow: hidden;
????????width: 250px;
????????border: 1px solid red;
????????font-size: 30px;
}

因使用了WebKit的CSS擴展屬性，該方法適用于WebKit瀏覽器及移動端；

注：

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

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

-webkit-box-orient?必須結合的屬性?，設置或檢索伸縮盒對象的子元素的排列方式?。

方法二：省略號在中間，根據偽類來設置背景遮擋文字

適用范圍：

該方法適用范圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。

注：

　　1.將height設置為line-height的整數倍，防止超出的文字露出。

　　2.給p::after添加漸變背景可避免文字只顯示一半。

　　3.由于ie6-7不顯示content內容，所以要添加標簽兼容ie6-7（如：<span>…<span/>）；兼容ie8需要將::after替換成:after。

p {
????????position: relative;
?　　line-height: 20px;?//可變
?　　max-height: 80px;//可變
?　　overflow: hidden;
?　　width: 240px;//可變
?　　border: 1px solid red;
}

p::after{
?　　content:?"...";
?　　position: absolute;
?　　bottom: 0;
?　　font-size: 18px;
?　　right: 7px;?//可變
?　　padding-right: 124px;//可變　　
? ? ? ? //兼容性處理
?　　background: -webkit-linear-gradient(left, transparent,?#fff 0%);
?　　background: -o-linear-gradient(right, transparent,?#fff 0%);
?　　background: -moz-linear-gradient(right, transparent,?#fff 0%);
?　　background: linear-gradient(to right, transparent,?#fff 0%);
}