在小(xiao)程序開(kai)發過程中(zhong)(zhong)，經常會遇(yu)到一(yi)些數據無法在text中(zhong)(zhong)完全展示，所以會使(shi)用到隱(yin)藏(zang)相關文字，并在后方加上省略(lve)號(...)。

只需要在對(dui)應(ying)的text中設置下(xia)面的css就可(ke)以了。

overflow:hidden; //超出一行文字自動隱藏 
text-overflow:ellipsis; //文字隱藏后添加省略號
white-space:nowrap; //強制不換行

不過上(shang)面的(de)css只能保證單行(xing)顯示隱藏，如果(guo)想要(yao)2，3，n行(xing)隱藏呢(ni)？這(zhe)個要(yao)求其(qi)實也是可以通(tong)過css做到的(de)。下面貼出(chu)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的(de)(de)數字，就(jiu)可(ke)以實(shi)現對應(ying)的(de)(de)需求了。