css為html標記語言提供了一種樣式描述，定義了其中元素的顯示方式。下面我們來看一下css如何設定文字超出幾行顯示省略號。

css設定超出幾行顯示省略號：

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>

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

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 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。