單行
display: block;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
- 直接用css屬性設(shè)置(只有-webkit內(nèi)核才有作用)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
移動(dòng)端瀏覽器絕大部分是WebKit內(nèi)核的，所以該方法適用于移動(dòng)端；
-
-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù),這是一個(gè)不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。 -
display: -webkit-box將對(duì)象作為彈性伸縮盒子模型顯示 。 -
-webkit-box-orient設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。 -
text-overflow: ellipsis以用來多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本。
2.JS實(shí)現(xiàn)
