在我們的頁(yè)面布局的時(shí)候，經(jīng)常會(huì)有這樣的需求，超過(guò)指定行文本的時(shí)候會(huì)進(jìn)行（省略號(hào)...）的處理，那么我們改怎么設(shè)置css呢？如下：
設(shè)置盒子的css為：
-
overflow:hidden;;
-
text-overflow:ellipsis;
-
white-space:nowrap;
但是這樣只能顯示一行而不能實(shí)現(xiàn)指定行，所以還要其他的方法來(lái)實(shí)現(xiàn)指定行處理的。
WebKit瀏覽器或移動(dòng)端的頁(yè)面（大部分移動(dòng)端都是webkit）
可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個(gè)不規(guī)范的屬性，它沒(méi)有出現(xiàn)在 CSS 規(guī)范草案中。
-webkit-line-clamp用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。
常見結(jié)合屬性：
-
display: -webkit-box; 必須結(jié)合的屬性 ，將對(duì)象作為彈性伸縮盒子模型顯示 。
-
-webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。
-
text-overflow: ellipsis;，可以用來(lái)多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本 。
css 代碼:
-
overflow：hidden;
-
text-overflow: ellipsis;
-
display: -webkit-box;
-
-webkit-line-clamp:2;/*這里控制著顯示多少行*/
-
-webkit-box-orient:vertical;
