在我們的頁(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àn)結(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;