單行
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;
移動端瀏覽器絕大部分是WebKit內(nèi)核的活箕,所以該方法適用于移動端漠另;
-
-webkit-line-clamp
用來限制在一個塊元素顯示的文本的行數(shù),這是一個不規(guī)范的屬性(unsupported WebKit property),它沒有出現(xiàn)在 CSS 規(guī)范草案中莺匠。 -
display: -webkit-box
將對象作為彈性伸縮盒子模型顯示 腥光。 -
-webkit-box-orient
設(shè)置或檢索伸縮盒對象的子元素的排列方式 罗珍。 -
text-overflow: ellipsis
以用來多行文本的情況下,用省略號“…”隱藏超出范圍的文本鹏往。
2.JS實現(xiàn)