css怎么設置超出幾行顯示省略號？

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