在小程序開發(fā)過程中，經(jīng)常會(huì)遇到一些數(shù)據(jù)無法在text中完全展示，所以會(huì)使用到隱藏相關(guān)文字，并在后方加上省略號(hào)(...)。

只需要在對(duì)應(yīng)的text中設(shè)置下面的css就可以了。

overflow:hidden; //超出一行文字自動(dòng)隱藏 
text-overflow:ellipsis; //文字隱藏后添加省略號(hào)
white-space:nowrap; //強(qiáng)制不換行

不過上面的css只能保證單行顯示隱藏，如果想要2，3，n行隱藏呢？這個(gè)要求其實(shí)也是可以通過css做到的。下面貼出css：

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

只要改變其中-webkit-line-clamp的數(shù)字，就可以實(shí)現(xiàn)對(duì)應(yīng)的需求了。